Enhance ScrollToHash component with improved scrolling logic and DOM readiness checks #61
Conversation
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.
When using anchor links, Docusaurus doesn't always load the elements in time.
I created a component that should help with this, but it didn't work the first time.
I got Cursor to help with:
Added a hashchange event listener to handle both programmatic navigation and direct browser navigation
The component now responds to browser-native hash changes, not just React router changes
Better DOM Detection
Added getBoundingClientRect() check to ensure the target element is actually visible and has dimensions before trying to scroll
Increased retry attempts from 3 to 5 for better reliability
Improved Timing
Added a DOM_READY_DELAY (50ms) for initial load to ensure DOM is fully ready
Used shorter retry intervals (100ms) for better responsiveness
Proper Cleanup
Added proper event listener cleanup to prevent memory leaks
Used refs to track current hash and initialization stat