Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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<void>(async (resolve) => {
await fireElementScroll(0)

expect(latest.y.scrollLength).toEqual(0)
expect(latest.y.progress).toEqual(0)
Comment on lines +439 to +440
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 X-axis progress not asserted

The fix in updateAxisInfo applies to both the x and y axes, but the test only asserts latest.y. Consider also asserting latest.x.scrollLength and latest.x.progress to give symmetric coverage of the guard:

Suggested change
expect(latest.y.scrollLength).toEqual(0)
expect(latest.y.progress).toEqual(0)
expect(latest.y.scrollLength).toEqual(0)
expect(latest.y.progress).toEqual(0)
expect(latest.x.scrollLength).toEqual(0)
expect(latest.x.progress).toEqual(0)


stopScroll()

resolve()
})
})

test("Reports non-negative progress for negative scroll values (reverse directions).", async () => {
let latest: ScrollInfo

Expand Down
2 changes: 1 addition & 1 deletion packages/framer-motion/src/render/dom/scroll/info.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 =
Expand Down