Enhancing User Experience with Smooth Scrolling 📜

[sanjaiyan-dev]

This PR adds scroll-behavior: smooth to 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 :(

[mportiz08]

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]

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]

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]

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]

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:

1. Clicking on headings
2. Refreshing after clicking the headings
3. Clicking on items in the OnThisPage right floating nav

[sanjaiyan-dev]

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:

1. Clicking on headings
2. Refreshing after clicking the headings
3. 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]

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:

Screen.Recording.2023-09-18.at.14.19.58.mov