fix: correct range input behavior, fixes #64

src/SideEffect.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { TouchEvent } from 'react';
-import { RemoveScrollBar } from 'react-remove-scroll-bar';
-import { styleSingleton } from 'react-style-singleton';
-import { handleScroll, locationCouldBeScrolled } from './handleScroll';
-import { nonPassive } from './aggresiveCapture';
-import { Axis, IRemoveScrollEffectProps } from './types';
+import {TouchEvent} from 'react';
+import {RemoveScrollBar} from 'react-remove-scroll-bar';
+import {styleSingleton} from 'react-style-singleton';
+import {handleScroll, locationCouldBeScrolled} from './handleScroll';
+import {nonPassive} from './aggresiveCapture';
+import {Axis, IRemoveScrollEffectProps} from './types';
 
 export const getTouchXY = (event: TouchEvent | WheelEvent) =>
  'changedTouches' in event
@@ -28,9 +28,7 @@ let idCounter = 0;
 let lockStack: any[] = [];
 
 export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) {
- const shouldPreventQueue = React.useRef<
- Array<{ name: string; delta: number[]; target: any; should: boolean }>
- >([]);
+ const shouldPreventQueue = React.useRef<Array<{ name: string; delta: number[]; target: any; should: boolean }>>([]);
  const touchStartRef = React.useRef([0, 0]);
  const activeAxis = React.useRef<Axis | undefined>();
  const [id] = React.useState(idCounter++);
@@ -86,6 +84,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
@@ -174,7 +178,7 @@ export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) {
 
  const shouldCancel = React.useCallback(
  (name: string, delta: number[], target: any, should: boolean) => {
- const event = { name, delta, target, should };
+ const event = {name, delta, target, should};
  shouldPreventQueue.current.push(event);
  setTimeout(() => {
  shouldPreventQueue.current = shouldPreventQueue.current.filter(
@@ -240,12 +244,12 @@ export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) {
  };
  }, []);
 
- const { removeScrollBar, inert } = props;
+ const {removeScrollBar, inert} = props;
 
  return (
  <React.Fragment>
- {inert ? <Style styles={generateStyle(id)} /> : null}
- {removeScrollBar ? <RemoveScrollBar gapMode="margin" /> : null}
+ {inert ? <Style styles={generateStyle(id)}/> : null}
+ {removeScrollBar ? <RemoveScrollBar gapMode="margin"/> : null}
  </React.Fragment>
  );
 }

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