Skip to content

docs(demos): keep tour spotlight on its target while scrolling - #162

Merged
lesnik512 merged 1 commit into
mainfrom
docs/demo-spotlight-follows-scroll
Oct 16, 2026
Merged

lesnik512 merged 1 commit into
mainfrom
docs/demo-spotlight-follows-scroll

Conversation

@lesnik512

Copy link
Copy Markdown
Member

On the demo pages, the guided-tour spotlight (dim panels, ring and coach card) stayed where it was on screen when you scrolled, so the bright hole drifted off its target.

The tour measured the targets with getBoundingClientRect() once per step and positioned position: fixed elements from that, with nothing listening for scroll or resize. makeTour now keeps the current step's target nodes and, while a step is open, recomputes the spotlight and coach position on scroll (capture, so nested scroll containers count too) and resize, at most once per animation frame. The listeners are removed when the step closes or the demo resets. All mount modes (single client, herd, full stack) share makeTour, so they all get the fix.

Re-placing the coach on scroll can switch which side it sits on more often, so the arrow's border overrides are now cleared before each placement. Otherwise borders from the previous side could carry over.

I considered switching the overlay to position: absolute in document coordinates. It would scroll with the page on its own, but the full-screen dim panels and the coach's viewport clamping would need reworking, so re-measuring is the smaller change.

Testing

The repo has no JS test harness, so I checked this with a throwaway headless Playwright script against mkdocs serve. It plays each demo until the first stop, scrolls 120px, and measures how far the ring moved:

engine retry retry herd circuit breaker full stack
main 0px 0px 0px 0px
this branch 120px 120px 120px 120px

mkdocs build --strict passes.

@lesnik512
lesnik512 merged commit 5eb1b76 into main Oct 16, 2026
13 checks passed
@lesnik512
lesnik512 deleted the docs/demo-spotlight-follows-scroll branch October 16, 2026 15:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant