SaidOurhou

Smooth Scroll Doesn't work on Firefox V 64.0 Windows 10

Recommended Posts

I ve implemented this codepen smoothScroll on my project, it works in all browsers except Firefox, any idea why it didn't work please? Thank you in advanced.

 

 

 

 

 

Share this post


Link to post
Share on other sites

Which OS and browser version?

 

In MacOS (Mojave) with Firefox 62 ... all looks good here (actually better than Safari and similar to Chrome)

Share this post


Link to post
Share on other sites
11 minutes ago, Shaun Gorneau said:

Which OS and browser version?

 

In MacOS (Mojave) with Firefox 62 ... all looks good here (actually better than Safari and similar to Chrome)

I'm in version 64.0 Firefox Windows 10, the example above works good, but not on my project,  got no error on my console .

Share this post


Link to post
Share on other sites

Hello @SaidOurhou

 

Sorry your having issues.

 

You will get a better smooth scroll by just binding an event to the scroll event instead of mousewheel event. The mousewheel event can be inconsistent since its still non standard and experimental (see mousewheel docs).

 

For a nice smooth scroll effect you can look at this post topic:

 

 

Also with scroll events you might want to look into throttling and debouncing for scrolling events to prevent jank (lost frames choppiness) and get smooth silkiness. Since your code will be firing an insane amount of times due to how the scroll event fires.

 

https://www.html5rocks.com/en/tutorials/speed/animations/

https://css-tricks.com/debouncing-throttling-explained-examples/

 

Happy Tweening :)

  • Like 5

Share this post


Link to post
Share on other sites
47 minutes ago, Jonathan said:

Hello @SaidOurhou

×
GRAMMALECTE
Lexicographe
Correction grammaticale
Conjugueur
Onglet
Fenêtre
 

 

 

Sorry your having issues.

 

You will get a better smooth scroll by just binding an event to the scroll event instead of mousewheel event. The mousewheel event can be inconsistent since its still non standard and experimental (see mousewheel docs).

 

For a nice smooth scroll effect you can look at this post topic:

 

 

Also with scroll events you might want to look into throttling and debouncing for scrolling events to prevent jank (lost frames choppiness) and get smooth silkiness. Since your code will be firing an insane amount of times due to how the scroll event fires.

 

https://www.html5rocks.com/en/tutorials/speed/animations/

https://css-tricks.com/debouncing-throttling-explained-examples/

 

Happy Tweening :)

Hi,

 

Thank you for your help, I fixed it, I was adding a smooth scroll css to the body "scroll-behavior: smooth;" once I removed it, it worked on all browsers.

 

Have a good day!

saidourhou.com

 

  • Like 4

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.