feat(nx-dev): improve auto-scrolling so it does not interfere with users reading the content #19196
Conversation
This file contains 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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
jaysoo
force-pushed
the
ai-chat/fix-scrolling
branch
3 times, most recently
from
5b17197
to
617716f
Compare
jaysoo
force-pushed
the
ai-chat/fix-scrolling
branch
from
617716f
to
d04d5c4
Compare
jaysoo
force-pushed
the
ai-chat/fix-scrolling
branch
2 times, most recently
from
112011b
to
dda0931
Compare
jaysoo
force-pushed
the
ai-chat/fix-scrolling
branch
4 times, most recently
from
ce69771
to
8f1a1c6
Compare
jaysoo
force-pushed
the
ai-chat/fix-scrolling
branch
from
8f1a1c6
to
3fb7633
Compare
…ers reading the content
jaysoo
force-pushed
the
ai-chat/fix-scrolling
branch
from
3fb7633
to
8134daf
Compare
| if (messages.length > currentMessagesLength.current) { | ||
| currentMessagesLength.current = messages.length; | ||
| shouldScroll = true; | ||
| } else if (el.scrollTop + el.clientHeight + 50 >= el.scrollHeight) { |
There was a problem hiding this comment.
If it's exactly the scrollHeight then it's hard for user to scroll to the bottom fast enough and re-enable auto-scroll. The 50 pixels (about two lines of text) seem to work well enough on both desktop and mobile.
isaacplmann
approved these changes
Sep 15, 2023
|
This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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 PR improves auto-scrolling, so we check if the user is close to the bottom of the content before scrolling them down. It prevents problems where users can lose the position of where they are reading.
Drastically improves the mobile experience as well where the screen no longer jumps around all the time when typing or reading.
Before:
before.mp4
After:
after.mp4