fix: Sheet.scroller from within and Shadow DOM

example/components/App.tsx

@@ -25,6 +25,7 @@ import { DisableDrag } from './DisableDrag';
 import { ScrollableSnapPoints } from './ScrollableSnapPoints';
 import { ContentHeight } from './ContentHeight';
 import { AvoidKeyboard } from './AvoidKeyboard';
+import { ScrollableShadowDOM } from './ScrollableShadowDOM';
 
 export function App() {
   return (
@@ -53,6 +54,16 @@ export function App() {
           </Screen>
         }
       />
+
+      <Route
+        path="scrollable-shadow-dom/*"
+        element={
+          <Screen bg="light">
+            <ScrollableShadowDOM />
+          </Screen>
+        }
+      />
+
       <Route
         path="scrollable/*"
         element={
@@ -61,6 +72,7 @@ export function App() {
           </Screen>
         }
       />
+
       <Route
         path="avoid-keyboard/*"
         element={
@@ -153,6 +165,13 @@ const ExampleSelector = () => {
         </ExampleLink>
       </li>
 
+      <li>
+        <ExampleLink to="scrollable-shadow-dom">
+          <ScrollIcon size={48} />
+          <span>Scrollable (in a Shadow DOM)</span>
+        </ExampleLink>
+      </li>
+
       <li>
         <ExampleLink to="disable-drag">
           <LockIcon size={48} />

example/components/ScrollableShadowDOM.tsx

@@ -0,0 +1,90 @@
+import { useState, useEffect } from 'react';
+import { Sheet } from 'react-modal-sheet';
+
+import { Button } from './common';
+
+const SHADOW_ROOT_ID = 'react-modal-sheet-shadow-root';
+
+export function ScrollableShadowDOM() {
+  const [isOpen, setOpen] = useState(false);
+  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
+
+  useEffect(() => {
+    // Create a shadow DOM root dynamically if it doesn't already exist
+    let shadowRootContainer = document.getElementById(SHADOW_ROOT_ID);
+    if (!shadowRootContainer) {
+      shadowRootContainer = document.createElement('div');
+      shadowRootContainer.id = SHADOW_ROOT_ID;
+      document.body.appendChild(shadowRootContainer);
+    }
+
+    // Attach shadow root and update state
+    if (!shadowRoot) {
+      const root = shadowRootContainer.attachShadow({ mode: 'open' });
+      setShadowRoot(root);
+    }
+
+    return () => {
+      // Clean up the shadow root when the component is unmounted
+      if (shadowRoot) {
+        shadowRoot.host.remove();
+        setShadowRoot(null);
+      }
+    };
+  }, [shadowRoot]);
+
+  const open = () => setOpen(true);
+  const close = () => setOpen(false);
+
+  return (
+    <>
+      <Button onClick={open}>Scrollable + Shadow DOM</Button>
+
+      {/* Render the Sheet only when the shadowRoot is ready */}
+      {shadowRoot && (
+        <Sheet
+          isOpen={isOpen}
+          onClose={close}
+          mountPoint={shadowRoot as unknown as HTMLElement}
+        >
+          <Sheet.Container>
+            <Sheet.Header />
+            <Sheet.Content>
+              <Sheet.Scroller>
+                {/* We used inline styles because the CSS in document.head is outside the shadow DOM */}
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    padding: '16px',
+                    paddingTop: '0px',
+                  }}
+                >
+                  {Array.from({ length: 50 }).map((_, i) => (
+                    <div
+                      key={i}
+                      style={{
+                        backgroundColor: '#eee',
+                        borderRadius: '12px',
+                        minHeight: '200px',
+                        marginBottom: '16px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontWeight: '700',
+                        fontSize: '24px',
+                      }}
+                    >
+                      {i}
+                    </div>
+                  ))}
+                </div>
+              </Sheet.Scroller>
+            </Sheet.Content>
+          </Sheet.Container>
+          <Sheet.Backdrop />
+        </Sheet>
+      )}
+    </>
+  );
+}

src/use-prevent-scroll.ts

@@ -157,8 +157,9 @@ function preventScrollMobileSafari() {
   let lastY = 0;
 
   const onTouchStart = (e: TouchEvent) => {
+    const target = e.composedPath()?.[0] as HTMLElement;
     // Store the nearest scrollable parent element from the element that the user touched.
-    scrollable = getScrollParent(e.target as Element, true);
+    scrollable = getScrollParent(target, true);
     if (
       scrollable === document.documentElement &&
       scrollable === document.body
@@ -207,7 +208,7 @@ function preventScrollMobileSafari() {
   };
 
   const onTouchEnd = (e: TouchEvent) => {
-    const target = e.target as HTMLElement;
+    const target = e.composedPath()?.[0] as HTMLElement;
 
     // Apply this change if we're not already focused on the target element
     if (willOpenKeyboard(target) && target !== document.activeElement) {
@@ -225,7 +226,7 @@ function preventScrollMobileSafari() {
   };
 
   const onFocus = (e: FocusEvent) => {
-    const target = e.target as HTMLElement;
+    const target = e.composedPath()?.[0] as HTMLElement;
     if (willOpenKeyboard(target)) {
       // Transform also needs to be applied in the focus event in cases where focus moves
       // other than tapping on an input directly, e.g. the next/previous buttons in the