fix: correct shadow dom traversal

src/handleScroll.ts

@@ -90,9 +90,6 @@ export const handleScroll = (
   let availableScrollTop = 0;
 
   do {
-    if (target instanceof ShadowRoot) {
-      target = target.host as HTMLElement;
-    }
     const [position, scroll, capacity] = getScrollVariables(axis, target);
 
     const elementScroll = scroll - capacity - directionFactor * position;
@@ -104,7 +101,11 @@ export const handleScroll = (
       }
     }
 
-    target = target.parentNode as any;
+    if (target instanceof ShadowRoot) {
+      target = target.host as HTMLElement;
+    } else {
+      target = target.parentNode as HTMLElement;
+    }
   } while (
     // portaled content
     (!targetInLock && target !== document.body) ||

stories/shadow-dom.stories.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { RemoveScroll } from '../src';
+
+function LongList() {
+  return (
+    <div style={{ backgroundColor: 'white' }}>
+      <RemoveScroll>
+        <div style={{ overflow: 'auto', height: '100vh' }}>
+          {new Array(100).fill(0).map((_, idx) => (
+            <div key={idx}>Inside {idx}</div>
+          ))}
+        </div>
+      </RemoveScroll>
+
+      {new Array(100).fill(0).map((_, idx) => (
+        <div key={idx}>Outside {idx}</div>
+      ))}
+    </div>
+  );
+}
+
+export function ScrollInShadowDom() {
+  const [portal, setPortal] = React.useState<any>(null);
+  const setRef = React.useCallback((ref) => {
+    if (ref) {
+      const shadowRoot = ref.attachShadow({ mode: 'open' });
+      setPortal(ReactDOM.createPortal(<LongList />, shadowRoot));
+    }
+  }, []);
+
+  return (
+    <div style={{ height: 300, overflow: 'scroll', padding: 50, backgroundColor: 'yellow' }}>
+      <div ref={setRef} />
+      {portal}
+    </div>
+  );
+}
+
+export default {
+  title: 'shadow dom',
+};