Fixing scroll

mattgperry · mattgperry · commit 5bd1f252a660 · 2025-04-25T13:09:58.000+02:00
diff --git a/dev/html/public/playwright/animate/animate-scroll.html b/dev/html/public/playwright/animate/animate-scroll.html
@@ -0,0 +1,67 @@
+<html>
+    <head>
+        <style>
+            body {
+                margin: 0;
+                font-family: sans-serif;
+            }
+
+            .container {
+                display: flex;
+                gap: 10px;
+                flex-direction: column;
+                height: 200vh;
+            }
+
+            .box {
+                width: 100px;
+                height: 100px;
+                background-color: #0077ff;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                text-align: center;
+                position: fixed;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <div class="box" id="mini" style="top: 0px">mini</div>
+            <div class="box" id="js" style="top: 100px">js</div>
+            <div class="box" id="waapi" style="top: 200px">waapi</div>
+        </div>
+        <script type="module" src="/src/inc.js"></script>
+        <script type="module">
+            const { animateMini, animate, scroll, delay } = window.Motion
+
+            const options = {
+                duration: 0.2,
+            }
+
+            const miniElement = document.querySelector("#mini")
+            const jsElement = document.querySelector("#js")
+            const waapiElement = document.querySelector("#waapi")
+
+            const mini = animateMini(
+                miniElement,
+                { transform: "translateX(100px)" },
+                options
+            )
+            const js = animate(jsElement, { x: 100 }, options)
+            const waapi = animate(
+                waapiElement,
+                { transform: "translateX(100px)" },
+                options
+            )
+
+            const scrollOptions = {
+                offset: ["start start", "end end"],
+            }
+
+            scroll(mini, scrollOptions)
+            scroll(js, scrollOptions)
+            scroll(waapi, scrollOptions)
+        </script>
+    </body>
+</html>
diff --git a/packages/framer-motion/src/render/dom/scroll/index.ts b/packages/framer-motion/src/render/dom/scroll/index.ts
@@ -5,11 +5,7 @@ import { OnScroll, ScrollOptions } from "./types"
 
 export function scroll(
     onScroll: OnScroll | AnimationPlaybackControls,
-    {
-        axis = "y",
-        container = document.documentElement,
-        ...options
-    }: ScrollOptions = {}
+    { axis = "y", container = document.body, ...options }: ScrollOptions = {}
 ): VoidFunction {
     const optionsWithDefaults = { axis, container, ...options }
 
diff --git a/packages/framer-motion/src/render/dom/scroll/on-scroll-handler.ts b/packages/framer-motion/src/render/dom/scroll/on-scroll-handler.ts
@@ -27,6 +27,8 @@ function measure(
         }
     }
 
+    console.log(target.scrollHeight, target.clientHeight)
+
     info.x.targetLength =
         target === container ? target.scrollWidth : target.clientWidth
     info.y.targetLength =
diff --git a/packages/framer-motion/src/render/dom/scroll/utils/get-timeline.ts b/packages/framer-motion/src/render/dom/scroll/utils/get-timeline.ts
@@ -55,5 +55,5 @@ export function getTimeline({
                 : scrollTimelineFallback({ container, ...options })
     }
 
-    return targetCache[axis]!
+    return targetCache[axisKey]!
 }
diff --git a/tests/animate/animate.spec.ts b/tests/animate/animate.spec.ts
@@ -376,6 +376,22 @@ test.describe("animate() methods", () => {
             expect(style).toContain("transform: ")
         })
     })
+
+    test("scroll", async ({ page }) => {
+        test.use({ viewport: { width: 500, height: 500 } })
+
+        await waitForAnimation("animate/animate-scroll.html", page)
+
+        // Scroll 250px
+        await page.evaluate(() => {
+            window.scrollTo(0, 250)
+        })
+
+        await eachBox(page, async (box) => {
+            const boundingBox = await box.boundingBox()
+            expect(boundingBox?.x).toBeCloseTo(50)
+        })
+    })
 })
 
 test.describe("animate() properties", () => {

Original file line number	Diff line number	Diff line change
`@@ -27,6 +27,8 @@ function measure(`
`27`	`27`	`}`
`28`	`28`	`}`
`29`	`29`
	`30`	`+ console.log(target.scrollHeight, target.clientHeight)`
	`31`	`+`
`30`	`32`	`info.x.targetLength =`
`31`	`33`	`target === container ? target.scrollWidth : target.clientWidth`
`32`	`34`	`info.y.targetLength =`
Original file line number	Diff line number	Diff line change
`@@ -55,5 +55,5 @@ export function getTimeline({`
`55`	`55`	`: scrollTimelineFallback({ container, ...options })`
`56`	`56`	`}`
`57`	`57`
`58`		`- return targetCache[axis]!`
	`58`	`+ return targetCache[axisKey]!`
`59`	`59`	`}`