fix: pointer events offset for ScrollControls

pmndrs · Oct 29, 2021 · 1766ed2 · 1766ed2
1 parent 64fb3f7
commit 1766ed2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/.storybook/stories/ScrollControls.stories.tsx b/.storybook/stories/ScrollControls.stories.tsx
@@ -121,7 +121,7 @@ const Container = ({ children }) => (
       paddingLeft: '100px',
       paddingRight: '100px',
       paddingBottom: '100px',
-      height: '100%',
+      height: 'calc(100vh - 200px)',
     }}
   >
     {children}
@@ -136,12 +136,11 @@ export const DefaultStory = () => (
 DefaultStory.decorators = [(storyFn) => <ScrollControlsSetup>{storyFn()}</ScrollControlsSetup>]
 DefaultStory.storyName = 'Default'
 
-export const InsideContainerStory = () => <DefaultStory />
-InsideContainerStory.decorators = [
-  (storyFn) => (
-    <Container>
-      <ScrollControlsSetup>{storyFn()}</ScrollControlsSetup>
-    </Container>
-  ),
-]
+export const InsideContainerStory = () => (
+  <Container>
+    <ScrollControlsSetup>
+      <DefaultStory />
+    </ScrollControlsSetup>
+  </Container>
+)
 InsideContainerStory.storyName = 'Inside a container'
diff --git a/src/web/ScrollControls.tsx b/src/web/ScrollControls.tsx
@@ -112,7 +112,10 @@ export function ScrollControls({
     const oldTarget = events.connected
     requestAnimationFrame(() => events.connect?.(el))
     const oldCompute = raycaster.computeOffsets
-    raycaster.computeOffsets = ({ clientX, clientY }) => ({ offsetX: clientX, offsetY: clientY })
+    raycaster.computeOffsets = ({ clientX, clientY }) => ({
+      offsetX: clientX - (target as HTMLElement).offsetLeft,
+      offsetY: clientY - (target as HTMLElement).offsetTop,
+    })
 
     return () => {
       target.removeChild(el)