fix: can't scroll the document on Firefox (#287)

Co-authored-by: [email protected] <[email protected]>

Author: hanszeng-chn

src/List.tsx

@@ -438,8 +438,11 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
 
   useLayoutEffect(() => {
     // Firefox only
-    function onMozMousePixelScroll(e: Event) {
-      if (useVirtual) {
+    function onMozMousePixelScroll(e: WheelEvent) {
+      // scrolling at top/bottom limit
+      const scrollingUpAtTop = isScrollAtTop && e.detail < 0;
+      const scrollingDownAtBottom = isScrollAtBottom && e.detail > 0;
+      if (useVirtual && !scrollingUpAtTop && !scrollingDownAtBottom) {
         e.preventDefault();
       }
     }
@@ -454,7 +457,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
       componentEle.removeEventListener('DOMMouseScroll', onFireFoxScroll as any);
       componentEle.removeEventListener('MozMousePixelScroll', onMozMousePixelScroll as any);
     };
-  }, [useVirtual]);
+  }, [useVirtual, isScrollAtTop, isScrollAtBottom]);
 
   // Sync scroll left
   useLayoutEffect(() => {

tests/scroll-Firefox.test.js

@@ -84,4 +84,59 @@ describe('List.Firefox-Scroll', () => {
     expect(wheelPreventDefault).not.toHaveBeenCalled();
     expect(firefoxPreventDefault).toHaveBeenCalledTimes(1);
   });
+
+  it('should call preventDefault on MozMousePixelScroll', () => {
+    const preventDefault = jest.fn();
+    const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100) });
+    const ulElement = wrapper.find('ul').instance();
+
+    act(() => {
+      const event = new Event('MozMousePixelScroll');
+      event.detail = 6;
+      event.preventDefault = preventDefault;
+      ulElement.dispatchEvent(event);
+
+      jest.runAllTimers();
+    });
+
+    expect(preventDefault).toHaveBeenCalled();
+  });
+
+  it('should not call preventDefault on MozMousePixelScroll when scrolling up at top boundary', () => {
+    const preventDefault = jest.fn();
+    const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100) });
+    const ulElement = wrapper.find('ul').instance();
+
+    act(() => {
+      const event = new Event('MozMousePixelScroll');
+      event.detail = -6;
+      event.preventDefault = preventDefault;
+      ulElement.dispatchEvent(event);
+
+      jest.runAllTimers();
+    });
+
+    expect(preventDefault).not.toHaveBeenCalled();
+  });
+  it('should not call preventDefault on MozMousePixelScroll when scrolling down at bottom boundary', () => {
+    const preventDefault = jest.fn();
+    const listRef = React.createRef();
+    const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100), ref: listRef });
+    const ulElement = wrapper.find('ul').instance();
+    // scroll to bottom
+    listRef.current.scrollTo(99999);
+    jest.runAllTimers();
+    expect(wrapper.find('ul').instance().scrollTop).toEqual(1900);
+
+    act(() => {
+      const event = new Event('MozMousePixelScroll');
+      event.detail = 6;
+      event.preventDefault = preventDefault;
+      ulElement.dispatchEvent(event);
+
+      jest.runAllTimers();
+    });
+
+    expect(preventDefault).not.toHaveBeenCalled();
+  });
 });