fix: engage reveal effect only on scroll deceleration#34
Merged
Conversation
This change improves the visual stability of the sticky element by engaging the reveal effect only when the scroll speed is decelerating. This prevents visual gaps that occur during rapid acceleration phases where the browser's scroll position prediction is less accurate. - Updated src/top.ts and src/bottom.ts to track scroll step changes and only trigger sticky release when decelerating above the threshold - Enhanced documentation in README.md and demo pages with detailed explanations of the "Visual Gap" problem and solution - Added comprehensive narrative in multi-header-snap.html demo explaining the scrolling phases and prediction logic
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves the visual stability of sticky elements by only engaging the reveal effect during scroll deceleration phases, when browser scroll prediction is more accurate. This prevents visual gaps that occur during rapid acceleration phases. The implementation adds deceleration detection to both top and bottom sticky behaviors by tracking the previous scroll step and comparing it to the current one.
Key changes:
- Added
lastScrollSteptracking to detect scroll deceleration in bothsrc/top.tsandsrc/bottom.ts - Modified reveal effect conditions to only trigger when scrolling is decelerating AND above the speed threshold
- Enhanced documentation with comprehensive explanations of the "Visual Gap" problem and the deceleration-based solution
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/top.ts | Added deceleration detection for upward scroll reveal effect |
| src/bottom.ts | Added deceleration detection for downward scroll reveal effect |
| demo/multi-header-snap.html | Added comprehensive narrative explaining the visual gap problem and deceleration solution |
| demo/basic-how-it-works.html | Updated technical explanation to mention acceleration vs deceleration phases |
| README.md | Updated snapEagerness documentation to reference the detailed gap explanation |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Owner
Author
|
🎉 This PR is included in version 1.4.2 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This change improves the visual stability of the sticky element by engaging the reveal effect only when the scroll speed is decelerating. This prevents visual gaps that occur during rapid acceleration phases where the browser's scroll position prediction is less accurate.