fix: Not block scroll when list is not scrollable (#55)

* chore: Move keepInRange in List

* add canScroll hooks

* stop smooth when touch done

* test case

* clean up

Author: zombieJ

examples/switch.tsx

@@ -36,11 +36,11 @@ function getData(count: number) {
 
 const Demo = () => {
   const [height, setHeight] = React.useState(100);
-  const [data, setData] = React.useState(getData(100));
+  const [data, setData] = React.useState(getData(20));
 
   return (
     <React.StrictMode>
-      <div>
+      <div style={{ height: '150vh' }}>
         <h2>Switch</h2>
         <span
           onChange={(e: any) => {

src/List.tsx

@@ -6,11 +6,11 @@ import ScrollBar from './ScrollBar';
 import { RenderFunc, SharedConfig, GetKey } from './interface';
 import useChildren from './hooks/useChildren';
 import useHeights from './hooks/useHeights';
-import useInRange from './hooks/useInRange';
 import useScrollTo from './hooks/useScrollTo';
 import useDiffItem from './hooks/useDiffItem';
 import useFrameWheel from './hooks/useFrameWheel';
 import useMobileTouchMove from './hooks/useMobileTouchMove';
+import useOriginScroll from './hooks/useOriginScroll';
 
 const EMPTY_DATA = [];
 
@@ -186,7 +186,22 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   rangeRef.current.end = end;
 
   // =============================== In Range ===============================
-  const keepInRange = useInRange(scrollHeight, height);
+  const maxScrollHeight = scrollHeight - height;
+  const maxScrollHeightRef = useRef(maxScrollHeight);
+  maxScrollHeightRef.current = maxScrollHeight;
+
+  function keepInRange(newScrollTop: number) {
+    let newTop = Math.max(newScrollTop, 0);
+    if (!Number.isNaN(maxScrollHeightRef.current)) {
+      newTop = Math.min(newTop, maxScrollHeightRef.current);
+    }
+    return newTop;
+  }
+
+  const isScrollAtTop = scrollTop <= 0;
+  const isScrollAtBottom = scrollTop >= maxScrollHeight;
+
+  const originScroll = useOriginScroll(isScrollAtTop, isScrollAtBottom);
 
   // ================================ Scroll ================================
   function onScrollBar(newScrollTop: number) {
@@ -209,16 +224,27 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   }
 
   // Since this added in global,should use ref to keep update
-  const [onRawWheel, onFireFoxScroll] = useFrameWheel(inVirtual, offsetY => {
-    syncScrollTop(top => {
-      const newTop = keepInRange(top + offsetY);
-      return newTop;
-    });
-  });
+  const [onRawWheel, onFireFoxScroll] = useFrameWheel(
+    inVirtual,
+    isScrollAtTop,
+    isScrollAtBottom,
+    offsetY => {
+      syncScrollTop(top => {
+        const newTop = keepInRange(top + offsetY);
+
+        return newTop;
+      });
+    },
+  );
 
   // Mobile touch move
-  useMobileTouchMove(inVirtual, componentRef, deltaY => {
+  useMobileTouchMove(inVirtual, componentRef, (deltaY, smoothOffset) => {
+    if (originScroll(deltaY, smoothOffset)) {
+      return false;
+    }
+
     onRawWheel({ preventDefault() {}, deltaY } as WheelEvent);
+    return true;
   });
 
   React.useEffect(() => {

src/hooks/useFrameWheel.ts

@@ -1,6 +1,7 @@
 import { useRef } from 'react';
 import raf from 'rc-util/lib/raf';
 import isFF from '../utils/isFirefox';
+import useOriginScroll from './useOriginScroll';
 
 interface FireFoxDOMMouseScrollEvent {
   detail: number;
@@ -9,6 +10,8 @@ interface FireFoxDOMMouseScrollEvent {
 
 export default function useFrameWheel(
   inVirtual: boolean,
+  isScrollAtTop: boolean,
+  isScrollAtBottom: boolean,
   onWheelDelta: (offset: number) => void,
 ): [(e: WheelEvent) => void, (e: FireFoxDOMMouseScrollEvent) => void] {
   const offsetRef = useRef(0);
@@ -18,19 +21,26 @@ export default function useFrameWheel(
   const wheelValueRef = useRef<number>(null);
   const isMouseScrollRef = useRef<boolean>(false);
 
+  // Scroll status sync
+  const originScroll = useOriginScroll(isScrollAtTop, isScrollAtBottom);
+
   function onWheel(event: WheelEvent) {
     if (!inVirtual) return;
 
+    raf.cancel(nextFrameRef.current);
+
+    const { deltaY } = event;
+    offsetRef.current += deltaY;
+    wheelValueRef.current = deltaY;
+
+    // Do nothing when scroll at the edge, Skip check when is in scroll
+    if (originScroll(deltaY)) return;
+
     // Proxy of scroll events
     if (!isFF) {
       event.preventDefault();
     }
 
-    raf.cancel(nextFrameRef.current);
-
-    offsetRef.current += event.deltaY;
-    wheelValueRef.current = event.deltaY;
-
     nextFrameRef.current = raf(() => {
       // Patch a multiple for Firefox to fix wheel number too small
       // ref: https://github.com/ant-design/ant-design/issues/26372#issuecomment-679460266

src/hooks/useInRange.tsx

@@ -6,7 +6,7 @@ const SMOOTH_PTG = 14 / 15;
 export default function useMobileTouchMove(
   inVirtual: boolean,
   listRef: React.RefObject<HTMLDivElement>,
-  callback: (offsetY: number) => void,
+  callback: (offsetY: number, smoothOffset?: boolean) => boolean,
 ) {
   const touchedRef = useRef(false);
   const touchYRef = useRef(0);
@@ -20,21 +20,20 @@ export default function useMobileTouchMove(
 
   const onTouchMove = (e: TouchEvent) => {
     if (touchedRef.current) {
-      e.preventDefault();
-
       const currentY = Math.ceil(e.touches[0].pageY);
       let offsetY = touchYRef.current - currentY;
       touchYRef.current = currentY;
 
-      callback(offsetY);
+      if (callback(offsetY)) {
+        e.preventDefault();
+      }
 
       // Smooth interval
       clearInterval(intervalRef.current);
       intervalRef.current = setInterval(() => {
         offsetY *= SMOOTH_PTG;
-        callback(offsetY);
 
-        if (Math.abs(offsetY) <= 0.1) {
+        if (!callback(offsetY, true) || Math.abs(offsetY) <= 0.1) {
           clearInterval(intervalRef.current);
         }
       }, 16);

src/hooks/useMobileTouchMove.ts

@@ -0,0 +1,42 @@
+import { useRef } from 'react';
+
+export default (isScrollAtTop: boolean, isScrollAtBottom: boolean) => {
+  // Do lock for a wheel when scrolling
+  const lockRef = useRef(false);
+  const lockTimeoutRef = useRef(null);
+  function lockScroll() {
+    clearTimeout(lockTimeoutRef.current);
+
+    lockRef.current = true;
+
+    lockTimeoutRef.current = setTimeout(() => {
+      lockRef.current = false;
+    }, 50);
+  }
+
+  // Pass to ref since global add is in closure
+  const scrollPingRef = useRef({
+    top: isScrollAtTop,
+    bottom: isScrollAtBottom,
+  });
+  scrollPingRef.current.top = isScrollAtTop;
+  scrollPingRef.current.bottom = isScrollAtBottom;
+
+  return (deltaY: number, smoothOffset = false) => {
+    const originScroll =
+      // Pass origin wheel when on the top
+      (deltaY < 0 && scrollPingRef.current.top) ||
+      // Pass origin wheel when on the bottom
+      (deltaY > 0 && scrollPingRef.current.bottom);
+
+    if (smoothOffset && originScroll) {
+      // No need lock anymore when it's smooth offset from touchMove interval
+      clearTimeout(lockTimeoutRef.current);
+      lockRef.current = false;
+    } else if (!originScroll || lockRef.current) {
+      lockScroll();
+    }
+
+    return !lockRef.current && originScroll;
+  };
+};

src/hooks/useOriginScroll.ts

@@ -47,33 +47,74 @@ describe('List.Touch', () => {
     return mount(node);
   }
 
-  it('touch content', () => {
-    const listRef = React.createRef();
-    const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100), ref: listRef });
+  describe('touch content', () => {
+    it('touch scroll should work', () => {
+      const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100) });
 
-    function getElement() {
-      return wrapper.find('.rc-virtual-list-holder').instance();
-    }
+      function getElement() {
+        return wrapper.find('.rc-virtual-list-holder').instance();
+      }
 
-    // start
-    const touchEvent = new Event('touchstart');
-    touchEvent.touches = [{ pageY: 100 }];
-    getElement().dispatchEvent(touchEvent);
+      // start
+      const touchEvent = new Event('touchstart');
+      touchEvent.touches = [{ pageY: 100 }];
+      getElement().dispatchEvent(touchEvent);
+
+      // move
+      const moveEvent = new Event('touchmove');
+      moveEvent.touches = [{ pageY: 90 }];
+      getElement().dispatchEvent(moveEvent);
+
+      // end
+      const endEvent = new Event('touchend');
+      getElement().dispatchEvent(endEvent);
+
+      // smooth
+      jest.runAllTimers();
+      expect(wrapper.find('ul').instance().scrollTop > 10).toBeTruthy();
+
+      wrapper.unmount();
+    });
 
-    // move
-    const moveEvent = new Event('touchmove');
-    moveEvent.touches = [{ pageY: 90 }];
-    getElement().dispatchEvent(moveEvent);
+    it('not call when not scroll-able', () => {
+      const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100) });
 
-    // end
-    const endEvent = new Event('touchend');
-    getElement().dispatchEvent(endEvent);
+      function getElement() {
+        return wrapper.find('.rc-virtual-list-holder').instance();
+      }
 
-    // smooth
-    jest.runAllTimers();
-    expect(wrapper.find('ul').instance().scrollTop > 10).toBeTruthy();
+      // start
+      const touchEvent = new Event('touchstart');
+      touchEvent.touches = [{ pageY: 500 }];
+      getElement().dispatchEvent(touchEvent);
 
-    wrapper.unmount();
+      // move
+      const preventDefault = jest.fn();
+      const moveEvent = new Event('touchmove');
+      moveEvent.touches = [{ pageY: 0 }];
+      moveEvent.preventDefault = preventDefault;
+      getElement().dispatchEvent(moveEvent);
+
+      // Call preventDefault
+      expect(preventDefault).toHaveBeenCalled();
+
+      // ======= Not call since scroll to the bottom =======
+      jest.runAllTimers();
+      preventDefault.mockReset();
+
+      // start
+      const touchEvent2 = new Event('touchstart');
+      touchEvent2.touches = [{ pageY: 500 }];
+      getElement().dispatchEvent(touchEvent2);
+
+      // move
+      const moveEvent2 = new Event('touchmove');
+      moveEvent2.touches = [{ pageY: 0 }];
+      moveEvent2.preventDefault = preventDefault;
+      getElement().dispatchEvent(moveEvent2);
+
+      expect(preventDefault).not.toHaveBeenCalled();
+    });
   });
 
   it('should container preventDefault', () => {