-
Notifications
You must be signed in to change notification settings - Fork 2.6k
Fix: Improve scroll lock behavior while maintaining memory efficiency #6763
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
- Use dynamic increaseViewportBy bottom value based on scroll position - When at bottom, use larger value (10,000px) to maintain scroll lock - When scrolled up, use smaller value (1,000px) for memory efficiency - Add followOutput='smooth' for better scroll behavior - Fixes scroll lock issues introduced in PR #6697
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR fixes scroll lock behavior issues that were introduced when fixing a memory leak in PR #6697. The solution implements a dynamic viewport buffer approach that maintains both memory efficiency and proper scroll behavior.
- Implements dynamic
increaseViewportBy.bottomvalues based on scroll position - Adds smooth scrolling animation with
followOutput='smooth' - Preserves memory efficiency while restoring scroll lock functionality
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for your contribution! I've reviewed the changes and have some suggestions for improvement. The dynamic viewport approach is clever and should effectively address the scroll lock issue while maintaining memory efficiency.
| }} | ||
| atBottomThreshold={10} | ||
| initialTopMostItemIndex={groupedMessages.length - 1} | ||
| followOutput="smooth" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good addition! The smooth scrolling should improve UX. Could you add a comment explaining how this relates to the scroll lock fix? This would help future maintainers understand the complete solution.
- Extract magic numbers into named constants (VIEWPORT_BUFFER_AT_BOTTOM, VIEWPORT_BUFFER_SCROLLED_UP, VIEWPORT_BUFFER_TOP) - Add detailed comments explaining how followOutput='smooth' relates to the scroll lock fix - Implement debouncing (300ms) for isAtBottom state to prevent rapid viewport buffer changes - Add hysteresis to avoid performance issues during rapid scrolling This maintains the balance between memory efficiency and proper scroll lock behavior while addressing all reviewer concerns.
- Remove verbose comments and references to other PRs - Keep comments concise and focused on what the code does
|
Fixed by #6780 |
Problem
PR #6697 fixed a memory leak by reducing the
increaseViewportBybottom value fromNumber.MAX_SAFE_INTEGERto1000, but this caused scroll lock issues where the chat view doesn't always stay pinned to the bottom when it should.Solution
This PR implements a dynamic approach that balances both memory efficiency and proper scroll behavior:
followOutput='smooth': Improves the scrolling animation when new content arrivesTechnical Details
The key change is making the
increaseViewportBy.bottomvalue dynamic based on theisAtBottomstate:This approach ensures:
Testing
Fixes the scroll lock regression introduced in #6697 while preserving the memory leak fix.
Important
Dynamic viewport buffer adjustment in
ChatView.tsxto fix scroll lock issues while maintaining memory efficiency.increaseViewportBy.bottominChatView.tsxbased onisAtBottomstate: 10,000px when at bottom, 1,000px when scrolled up.followOutput='smooth'for smoother scrolling when new content arrives.debouncedIsAtBottomstate to prevent rapid viewport buffer changes.atBottomStateChangeto manage scroll lock and visibility of scroll-to-bottom button.VIEWPORT_BUFFER_AT_BOTTOM,VIEWPORT_BUFFER_SCROLLED_UP, andVIEWPORT_BUFFER_TOPfor viewport buffer management.This description was created by
for d368697. You can customize this summary. It will automatically update as commits are pushed.