fix(web): inverted scroll handler should defer to nested scrollable element targets

Author: mtourj

src/native/config/PlatformHelper.web.ts

@@ -7,14 +7,69 @@ import {
 } from "recyclerlistview";
 import { DefaultJSItemAnimator } from "recyclerlistview/dist/reactnative/platform/reactnative/itemanimators/defaultjsanimator/DefaultJSItemAnimator";
 
+/**
+ * Checks if a wheel event should be handled by a nested scrollable element.
+ */
+const shouldNestedElementHandleScroll = (
+  event: globalThis.WheelEvent
+): boolean => {
+  const targetNode = event.target;
+  if (!(targetNode instanceof HTMLElement)) {
+    return false;
+  }
+
+  let target: HTMLElement | null = targetNode;
+  const currentTarget = event.currentTarget as HTMLElement;
+
+  while (target && target !== currentTarget) {
+    const style = window.getComputedStyle(target);
+    const overflowY = style.overflowY;
+    const overflowX = style.overflowX;
+
+    const isScrollableY =
+      overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay";
+    const isScrollableX =
+      overflowX === "auto" || overflowX === "scroll" || overflowX === "overlay";
+
+    // Check if element should handle vertical scroll
+    if (isScrollableY && target.scrollHeight > target.clientHeight) {
+      if (
+        (event.deltaY > 0 &&
+          target.scrollTop < target.scrollHeight - target.clientHeight) ||
+        (event.deltaY < 0 && target.scrollTop > 0)
+      ) {
+        return true;
+      }
+    }
+
+    // Check if element should handle horizontal scroll
+    if (isScrollableX && target.scrollWidth > target.clientWidth) {
+      if (
+        (event.deltaX > 0 &&
+          target.scrollLeft < target.scrollWidth - target.clientWidth) ||
+        (event.deltaX < 0 && target.scrollLeft > 0)
+      ) {
+        return true;
+      }
+    }
+
+    target = target.parentElement;
+  }
+
+  return false;
+};
+
 const createInvertedWheelEventHandler = (type: "horizontal" | "vertical") => {
   return (event: globalThis.WheelEvent) => {
-    const node = event.currentTarget as HTMLElement;
+    if (shouldNestedElementHandleScroll(event)) {
+      return;
+    }
 
+    const currentTarget = event.currentTarget as HTMLElement;
     const deltaX = type === "horizontal" ? -event.deltaX : event.deltaX;
     const deltaY = type === "vertical" ? -event.deltaY : event.deltaY;
 
-    node.scrollBy({
+    currentTarget.scrollBy({
       top: deltaY,
       left: deltaX,
       behavior: "auto",