fix(web): scroll direction inverted when inverted is set

src/FlashList.tsx

@@ -6,6 +6,7 @@ import {
   NativeSyntheticEvent,
   StyleSheet,
   NativeScrollEvent,
+  Platform,
 } from "react-native";
 import {
   BaseItemAnimator,
@@ -100,6 +101,8 @@ class FlashList<T> extends React.PureComponent<
   private isEmptyList = false;
   private viewabilityManager: ViewabilityManager<T>;
 
+  private hasInvertedWheelHandler = false;
+
   private itemAnimator?: BaseItemAnimator;
 
   static defaultProps = {
@@ -283,10 +286,26 @@ class FlashList<T> extends React.PureComponent<
     }
   };
 
+  private updateWebScrollHandler() {
+    if (Platform.OS !== "web" || !this.rlvRef) return;
+
+    if (this.props.inverted !== this.hasInvertedWheelHandler) {
+      if (this.props.inverted) {
+        PlatformConfig.addInvertedWheelHandler(this.rlvRef);
+        this.hasInvertedWheelHandler = true;
+      } else {
+        PlatformConfig.removeInvertedWheelHandler(this.rlvRef);
+        this.hasInvertedWheelHandler = false;
+      }
+    }
+  }
+
   componentDidMount() {
     if (this.props.data?.length === 0) {
       this.raiseOnLoadEventIfNeeded();
     }
+
+    this.updateWebScrollHandler();
   }
 
   componentWillUnmount() {
@@ -296,6 +315,14 @@ class FlashList<T> extends React.PureComponent<
     if (this.itemSizeWarningTimeoutId !== undefined) {
       clearTimeout(this.itemSizeWarningTimeoutId);
     }
+
+    if (this.hasInvertedWheelHandler) {
+      PlatformConfig.removeInvertedWheelHandler(this.rlvRef);
+    }
+  }
+
+  componentDidUpdate() {
+    this.updateWebScrollHandler();
   }
 
   render() {

src/native/config/PlatformHelper.ts

@@ -1,10 +1,26 @@
-import { BaseItemAnimator } from "recyclerlistview";
+import {
+  BaseItemAnimator,
+  RecyclerListView,
+  RecyclerListViewProps,
+} from "recyclerlistview";
 import { DefaultJSItemAnimator } from "recyclerlistview/dist/reactnative/platform/reactnative/itemanimators/defaultjsanimator/DefaultJSItemAnimator";
 
 const PlatformConfig = {
   defaultDrawDistance: 250,
   invertedTransformStyle: { transform: [{ scaleY: -1 }] },
   invertedTransformStyleHorizontal: { transform: [{ scaleX: -1 }] },
+  addInvertedWheelHandler: (
+    ref: RecyclerListView<RecyclerListViewProps, any> | undefined
+  ): (() => void) | undefined => {
+    // (web-only)
+    return undefined;
+  },
+  removeInvertedWheelHandler: (
+    ref: RecyclerListView<RecyclerListViewProps, any> | undefined
+  ): (() => void) | undefined => {
+    // (web-only)
+    return undefined;
+  },
 };
 const getCellContainerPlatformStyles = (
   inverted: boolean,

src/native/config/PlatformHelper.web.ts

@@ -1,12 +1,58 @@
 import React from "react";
-import { View } from "react-native";
-import { BaseItemAnimator } from "recyclerlistview";
+import { findNodeHandle, View } from "react-native";
+import {
+  BaseItemAnimator,
+  RecyclerListView,
+  RecyclerListViewProps,
+} from "recyclerlistview";
 import { DefaultJSItemAnimator } from "recyclerlistview/dist/reactnative/platform/reactnative/itemanimators/defaultjsanimator/DefaultJSItemAnimator";
 
+const invertedWheelEventHandler = (event: globalThis.WheelEvent) => {
+  const node = event.currentTarget as HTMLElement;
+
+  // For inverted lists, we want to scroll in the opposite direction
+  // So when deltaY is positive (scroll down), we want to scroll up
+  const deltaY = -event.deltaY;
+  const deltaX = -event.deltaX;
+
+  // Scroll by the inverted delta
+  node.scrollBy({
+    top: deltaY,
+    left: deltaX,
+    behavior: "auto",
+  });
+
+  // Prevent the default scroll
+  event.preventDefault();
+};
+
 const PlatformConfig = {
   defaultDrawDistance: 2000,
   invertedTransformStyle: { transform: [{ scaleY: -1 }] },
   invertedTransformStyleHorizontal: { transform: [{ scaleX: -1 }] },
+  addInvertedWheelHandler: (
+    ref: RecyclerListView<RecyclerListViewProps, any> | undefined
+  ): ((event: globalThis.WheelEvent) => void) | undefined => {
+    if (!ref) return undefined;
+    const node = findNodeHandle(ref) as unknown as HTMLElement;
+    if (node) {
+      node.addEventListener("wheel", invertedWheelEventHandler, {
+        passive: false,
+      });
+      return invertedWheelEventHandler;
+    }
+    return undefined;
+  },
+  removeInvertedWheelHandler: (
+    ref: RecyclerListView<RecyclerListViewProps, any> | undefined
+  ): ((event: globalThis.WheelEvent) => void) | undefined => {
+    if (!ref) return undefined;
+    const node = findNodeHandle(ref) as unknown as HTMLElement;
+    if (node) {
+      node.removeEventListener("wheel", invertedWheelEventHandler);
+    }
+    return undefined;
+  },
 };
 const getCellContainerPlatformStyles = (
   inverted: boolean,