diff --git a/packages/framer-motion/src/render/dom/scroll/__tests__/index.test.ts b/packages/framer-motion/src/render/dom/scroll/__tests__/index.test.ts index 88da756bcf..77e10a9cb9 100644 --- a/packages/framer-motion/src/render/dom/scroll/__tests__/index.test.ts +++ b/packages/framer-motion/src/render/dom/scroll/__tests__/index.test.ts @@ -398,6 +398,53 @@ describe("scrollInfo", () => { }) }) + test("Reports zero progress when container has no scroll overflow.", async () => { + let latest: ScrollInfo + + const container = document.createElement("div") + + const setContainerHeight = createMockMeasurement( + container, + "clientHeight" + ) + const setContainerLength = createMockMeasurement( + container, + "scrollHeight" + ) + const setContainerScrollTop = createMockMeasurement( + container, + "scrollTop" + ) + + // Content fits exactly in container — no overflow + setContainerHeight(500) + setContainerLength(500) + + const fireElementScroll = async (distance: number = 0) => { + setContainerScrollTop(distance) + container.dispatchEvent(new window.Event("scroll")) + await nextFrame() + } + + const stopScroll = scrollInfo( + (info) => { + latest = info + }, + { container } + ) + + return new Promise(async (resolve) => { + await fireElementScroll(0) + + expect(latest.y.scrollLength).toEqual(0) + expect(latest.y.progress).toEqual(0) + + stopScroll() + + resolve() + }) + }) + test("Reports non-negative progress for negative scroll values (reverse directions).", async () => { let latest: ScrollInfo diff --git a/packages/framer-motion/src/render/dom/scroll/info.ts b/packages/framer-motion/src/render/dom/scroll/info.ts index a35990f4f8..ce6058c404 100644 --- a/packages/framer-motion/src/render/dom/scroll/info.ts +++ b/packages/framer-motion/src/render/dom/scroll/info.ts @@ -52,7 +52,7 @@ function updateAxisInfo( axis.offset.length = 0 axis.offset[0] = 0 axis.offset[1] = axis.scrollLength - axis.progress = progress(0, axis.scrollLength, axis.current) + axis.progress = axis.scrollLength ? progress(0, axis.scrollLength, axis.current) : 0 const elapsed = time - prevTime axis.velocity =