-
Notifications
You must be signed in to change notification settings - Fork 67
Enhancing User Experience with Smooth Scrolling 📜 #729
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
@mportiz08
mportiz08
left a comment
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.
Unfortunately, I'm finding that this change has a negative impact on the experience of scrolling to linked subsections within example article content.
Example:
sanjaiyan-improve-css.mov
Notice how the page is no longer scrolling so that the linked subsection appears at the top of the page (under the nav bar).
You can compare this with the expected behavior on main:
main.mov
I'm not sure why this is happening with your simple change, but there must be something with our usage of the scrolling APIs that is messing with the timing/location or something when combined with this CSS addition.
If you're able to resolve this, I'd be happy to re-consider this change—smooth scrolling in general sounds like a good addition if we can get it working properly. Thanks for the contribution!
sanjaiyan-dev
commented
Sep 13, 2023
Unfortunately, I'm finding that this change has a negative impact on the experience of scrolling to linked subsections within example article content.
Example:
sanjaiyan-improve-css.mov
Notice how the page is no longer scrolling so that the linked subsection appears at the top of the page (under the nav bar).
You can compare this with the expected behavior on main:
main.mov
I'm not sure why this is happening with your simple change, but there must be something with our usage of the scrolling APIs that is messing with the timing/location or something when combined with this CSS addition.
If you're able to resolve this, I'd be happy to re-consider this change—smooth scrolling in general sounds like a good addition if we can get it working properly. Thanks for the contribution!
Sorry, I will try to resolve this issue (not sure) 🤞🏽
sanjaiyan-dev
commented
Sep 14, 2023
Unfortunately, I'm finding that this change has a negative impact on the experience of scrolling to linked subsections within example article content.
Example:
sanjaiyan-improve-css.mov
Notice how the page is no longer scrolling so that the linked subsection appears at the top of the page (under the nav bar).You can compare this with the expected behavior on main:
main.mov
I'm not sure why this is happening with your simple change, but there must be something with our usage of the scrolling APIs that is messing with the timing/location or something when combined with this CSS addition.If you're able to resolve this, I'd be happy to re-consider this change—smooth scrolling in general sounds like a good addition if we can get it working properly. Thanks for the contribution!
Hi, I tried to implement the smooth scrolling using JavsScript, hope it works 🤞🏽
@mportiz08
mportiz08
left a comment
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.
Nice—seems to be working now!
There are a number of failing unit tests to look into now, but I think you should be able to easily update them based on the changes you made. You can see them with npm test.
@dobromir-hristov
dobromir-hristov
left a comment
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.
On Chrome this is not behaving well at all.
In general, have to do a refactor on the way we handle scrolling. We sometimes call a scroll and then after a frame or two nudge by an extra few pixels to compensate for the sticky navbar for example. This is not visible when instant scrolling, but very much so when smooth scrolling.
This causes jumping and stuttering, especially on Chrome which is not OK.
Things I tried:
- Clicking on headings
- Refreshing after clicking the headings
- Clicking on items in the OnThisPage right floating nav
sanjaiyan-dev
commented
Sep 16, 2023
On Chrome this is not behaving well at all.
In general, have to do a refactor on the way we handle scrolling. We sometimes call a scroll and then after a frame or two nudge by an extra few pixels to compensate for the sticky navbar for example. This is not visible when instant scrolling, but very much so when smooth scrolling.
This causes jumping and stuttering, especially on Chrome which is not OK.
Things I tried:
- Clicking on headings
- Refreshing after clicking the headings
- Clicking on items in the OnThisPage right floating nav
Hi @dobromir-hristov , I made the your suggested changes :) , Hope it works correctly now !
dobromir-hristov
commented
Sep 18, 2023
Hi @dobromir-hristov , I made the your suggested changes :) , Hope it works correctly now !
Yes those are better, yet my last point still stands. When you land on a page with an anchor it does not smoothly scroll to that part of the page, but rather it starts jumping up/down.
Here is an example:
This PR adds
scroll-behavior: smoothto provide a smoother and more user-friendly scrolling experience, enhancing navigation, aesthetics, and engagement while maintaining compatibility with modern browsers.Extremely sorry, if I made any mistakes :(