fix: Firefox should prevent scroll

react-component · Sep 14, 2020 · 4a123b3 · 4a123b3
1 parent a4cb1c4
commit 4a123b3
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/examples/basic.tsx b/examples/basic.tsx
@@ -56,7 +56,7 @@ const Demo = () => {
 
   return (
     <React.StrictMode>
-      <div>
+      <div style={{ height: '200vh' }}>
         <h2>Basic</h2>
         {TYPES.map(({ name, type: nType }) => (
           <label key={nType}>

diff --git a/src/List.tsx b/src/List.tsx
@@ -247,11 +247,19 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   });
 
   React.useEffect(() => {
+    // Firefox only
+    function onMozMousePixelScroll(e: Event) {
+      e.preventDefault();
+    }
+
     componentRef.current.addEventListener('wheel', onRawWheel);
     componentRef.current.addEventListener('DOMMouseScroll', onFireFoxScroll as any);
+    componentRef.current.addEventListener('MozMousePixelScroll', onMozMousePixelScroll);
+
     return () => {
       componentRef.current.removeEventListener('wheel', onRawWheel);
       componentRef.current.removeEventListener('DOMMouseScroll', onFireFoxScroll as any);
+      componentRef.current.removeEventListener('MozMousePixelScroll', onMozMousePixelScroll as any);
     };
   }, [inVirtual]);
 

diff --git a/src/hooks/useFrameWheel.ts b/src/hooks/useFrameWheel.ts
@@ -54,9 +54,6 @@ export default function useFrameWheel(
   function onFireFoxScroll(event: FireFoxDOMMouseScrollEvent) {
     if (!inVirtual) return;
 
-    // Firefox level stop
-    event.preventDefault();
-
     isMouseScrollRef.current = event.detail === wheelValueRef.current;
   }
 

diff --git a/tests/scroll-Firefox.test.js b/tests/scroll-Firefox.test.js
@@ -68,6 +68,11 @@ describe('List.Firefox-Scroll', () => {
       wheelEvent.preventDefault = wheelPreventDefault;
       ulElement.dispatchEvent(wheelEvent);
 
+      const firefoxPixelScrollEvent = new Event('MozMousePixelScroll');
+      firefoxPixelScrollEvent.detail = 6;
+      firefoxPixelScrollEvent.preventDefault = firefoxPreventDefault;
+      ulElement.dispatchEvent(firefoxPixelScrollEvent);
+
       const firefoxScrollEvent = new Event('DOMMouseScroll');
       firefoxScrollEvent.detail = 3;
       firefoxScrollEvent.preventDefault = firefoxPreventDefault;
@@ -77,6 +82,6 @@ describe('List.Firefox-Scroll', () => {
     });
 
     expect(wheelPreventDefault).not.toHaveBeenCalled();
-    expect(firefoxPreventDefault).toHaveBeenCalled();
+    expect(firefoxPreventDefault).toHaveBeenCalledTimes(1);
   });
 });