fix: not scroll

Author: zombieJ

examples/nest.tsx

@@ -25,7 +25,7 @@ const MyItem: React.ForwardRefRenderFunction<any, Item> = ({ id }, ref) => (
         boxSizing: 'border-box',
         background: 'white',
       }}
-      debug={`inner_${id}`}
+      // debug={`inner_${id}`}
     >
       {(item, index, props) => (
         <div {...(item as any)} {...props} style={{ height: 20, border: '1px solid cyan' }}>
@@ -56,7 +56,7 @@ const Demo = () => {
           boxSizing: 'border-box',
         }}
         onScroll={onScroll}
-        debug="outer"
+        // debug="outer"
       >
         {(item, _, props) => <ForwardMyItem {...item} {...props} />}
       </List>

src/List.tsx

@@ -88,9 +88,6 @@ export interface ListProps<T> extends Omit<React.HTMLAttributes<any>, 'children'
 
   /** Render extra content into Filler */
   extraRender?: (info: ExtraRenderInfo) => React.ReactNode;
-
-  /** Not working in prod */
-  debug?: string;
 }
 
 export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
@@ -114,7 +111,6 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     innerProps,
     extraRender,
     styles,
-    debug,
     ...restProps
   } = props;
 
@@ -383,8 +379,6 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
 
   const onWheelDelta: Parameters<typeof useFrameWheel>[6] = useEvent((offsetXY, fromHorizontal) => {
     if (fromHorizontal) {
-      // Horizontal scroll no need sync virtual position
-
       flushSync(() => {
         setOffsetLeft((left) => {
           const nextOffsetLeft = left + (isRTL ? -offsetXY : offsetXY);
@@ -395,20 +389,12 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
 
       triggerScroll();
     } else {
-      // let isScrollOutOfBoundary = false;
       syncScrollTop((top) => {
         const newTop = top + offsetXY;
 
-        // const alignedTop = keepInRange(newTop);
-        // isScrollOutOfBoundary = alignedTop !== newTop;
-
         return newTop;
       });
-
-      // return !isScrollOutOfBoundary;
     }
-
-    // return true;
   });
 
   // Since this added in global,should use ref to keep update
@@ -420,20 +406,8 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     isScrollAtRight,
     !!scrollWidth,
     onWheelDelta,
-    debug,
   );
 
-  // const onDeduplicatedRawWheel: typeof onRawWheel = useEvent((e) => {
-  //   const event = e as WheelEvent & {
-  //     _virtualHandled?: boolean;
-  //   };
-
-  //   // Fix nest List trigger Wheel event
-  //   if (!event._virtualHandled) {
-  //     event._virtualHandled = true;
-  //     onRawWheel(event);
-  //   }
-  // });
   const onDeduplicatedRawWheel = onRawWheel;
 
   // Mobile touch move

src/hooks/useFrameWheel.ts

@@ -19,7 +19,6 @@ export default function useFrameWheel(
    * Return `true` when you need to prevent default event
    */
   onWheelDelta: (offset: number, horizontal: boolean) => void,
-  debugName?: string,
 ): [(e: WheelEvent) => void, (e: FireFoxDOMMouseScrollEvent) => void] {
   const offsetRef = useRef(0);
   const nextFrameRef = useRef<number>(null);
@@ -39,15 +38,10 @@ export default function useFrameWheel(
   function onWheelY(e: WheelEvent, deltaY: number) {
     raf.cancel(nextFrameRef.current);
 
-    offsetRef.current += deltaY;
-    wheelValueRef.current = deltaY;
-
     // Do nothing when scroll at the edge, Skip check when is in scroll
     if (originScroll(false, deltaY)) {
-      console.log(debugName, 'native scroll');
       return;
     }
-    console.log(debugName, 'virtual scroll', deltaY);
 
     // Skip if nest List has handled this event
     const event = e as WheelEvent & {
@@ -59,6 +53,9 @@ export default function useFrameWheel(
       return;
     }
 
+    offsetRef.current += deltaY;
+    wheelValueRef.current = deltaY;
+
     // Proxy of scroll events
     if (!isFF) {
       event.preventDefault();