fix: correct range input behavior, fixes #64

theKashey · Apr 16, 2022 · 0bd6ca8 · 0bd6ca8
1 parent 1ed83c4
commit 0bd6ca8
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/src/SideEffect.tsx b/src/SideEffect.tsx
@@ -86,6 +86,12 @@ export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) {
  const moveDirection: Axis =
  Math.abs(deltaX) > Math.abs(deltaY) ? 'h' : 'v';
 
+ // allow horizontal touch move on Range inputs. They will not cause any scroll
+ if ('touches' in event && moveDirection === 'h' && (target as HTMLInputElement).type === 'range') {
+ return false;
+ }
+
+
  let canBeScrolledInMainDirection = locationCouldBeScrolled(
  moveDirection,
  target

diff --git a/src/handleScroll.ts b/src/handleScroll.ts
@@ -10,10 +10,7 @@ const elementCouldBeVScrolled = (node: HTMLElement): boolean => {
 
 const elementCouldBeHScrolled = (node: HTMLElement): boolean => {
  const styles = window.getComputedStyle(node);
- // we allow horizontal scroll on range elements
- if ((node as HTMLInputElement).type === "range") {
- return true;
- }
+
  return (
  styles.overflowX !== 'hidden' && // not-not-scrollable
  !(styles.overflowY === styles.overflowX && styles.overflowX === 'visible') // scrollable