Lag when using CSS smooth scroll-behavior

Question

Lag when using CSS smooth scroll-behavior

Opened this issue 6 years ago · 8 comments

Just noticed that when using animate-scroll.js in conjunction with CSS scroll-behavior: smooth (applied to the html tag) then there's a noticable lag before starting the animation, about 1-2 seconds on a longer site.

Is this something you can fix, or should we use either CSS or animate-scroll?

Answer 1 · 2018-05-16T14:43:50.000Z

What browser are you using?

…

On Wed, May 16, 2018, 6:34 AM Roland Toth, ***@***.***> wrote: Just noticed that when using animate-scroll.js in conjunction with CSS scroll-behavior: smooth (applied to the html tag) then there's a noticable lag before starting the animation, about 1-2 seconds on a longer site. Is this something you can fix, or should we use either CSS or animate-scroll? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#7>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACpa3jXNz0-hA5p5DN62sHaM6M65Np7pks5tzADKgaJpZM4UBD4a> .

Answer 2 · 2018-05-16T14:48:23.000Z

SlimJet (Chromium):
Version 18.0.1.0 (based on Chromium 64.0.3282.119) (Official Build) (32-bit)

Answer 3 · 2018-05-17T07:03:32.000Z

On the demo page if you add scroll-behavior: smooth to the HTML then scroll either stops working or there's a lag:
http://sunmockyang.github.io/animate-scroll-js/demo/

The issue seems to be present in Chromium only, in Firefox it works fine.

Answer 4 · 2018-05-17T14:56:03.000Z

I tried it on Chrome on OSX and it just stops working after moving a tiny bit. I believe it's due to the code I added to stop scrolling if the user has scrolled in any direction. It does this by checking if the scroll position has changed since the last time it's animated the page scroll. I'm guessing smooth scrolling interferes with this by adding some acceleration to the scroll. The best way to fix this is to either disable smooth scrolling, or to disable cancelling the animation if the user (or browser itself) has scrolled in any direction. Or we could add a threshold saying there must be a certain level of page scroll for the animation to cancel.

…

On Thu, May 17, 2018 at 3:03 AM, Roland Toth ***@***.***> wrote: On the demo page if you add scroll-behavior: smooth to the HTML then scroll either stops working or there's a lag: http://sunmockyang.github.io/animate-scroll-js/demo/ The issue seems to be present in Chromium only, in Firefox it works fine. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#7 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACpa3g3xPXmAS9CA1lXIptVEL46W-Ejpks5tzSDMgaJpZM4UBD4a> .

Answer 5 · 2018-05-17T14:56:58.000Z

This is the line that this check occurs on https://github.com/sunmockyang/animate-scroll-js/blob/master/AnimateScroll.js#L65

…

On Thu, May 17, 2018 at 10:56 AM, Sunmock Yang ***@***.***> wrote: I tried it on Chrome on OSX and it just stops working after moving a tiny bit. I believe it's due to the code I added to stop scrolling if the user has scrolled in any direction. It does this by checking if the scroll position has changed since the last time it's animated the page scroll. I'm guessing smooth scrolling interferes with this by adding some acceleration to the scroll. The best way to fix this is to either disable smooth scrolling, or to disable cancelling the animation if the user (or browser itself) has scrolled in any direction. Or we could add a threshold saying there must be a certain level of page scroll for the animation to cancel. On Thu, May 17, 2018 at 3:03 AM, Roland Toth ***@***.***> wrote: > On the demo page if you add scroll-behavior: smooth to the HTML then > scroll either stops working or there's a lag: > http://sunmockyang.github.io/animate-scroll-js/demo/ > > The issue seems to be present in Chromium only, in Firefox it works fine. > > — > You are receiving this because you commented. > Reply to this email directly, view it on GitHub > <#7 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/ACpa3g3xPXmAS9CA1lXIptVEL46W-Ejpks5tzSDMgaJpZM4UBD4a> > . >

Answer 6 · 2018-05-18T10:54:18.000Z

Either solution would be OK to me. I think that if someone uses AnimateScroll with CSS smooth scroll he does it with a purpose (to achieve something that isn't possible with CSS, eg. clicking on a div instead on an anchor to scroll to a target). So in this case disabling CSS smooth scroll while the js scroll takes place would be preferrable imo.

Because you don't know what element is set to smooth scroll with CSS, I guess toggling a class on html would be the best, and the user can manually set scroll-behavior to auto if he needs to eg:

html * { scroll-behavior: auto; }

So on starting the js scroll add a class eg. animatescroll-on and remove on finish. This is just a quick idea, perhaps there is a better one.

Answer 7 · 2018-06-06T02:23:19.000Z

Hmmm that's a little too ham handed I think since there's no easy way to see which element has smooth scrolling turned on (at least that I'm aware of). Actually I should look into the "OnScroll" API and see if there's a way to differentiate the browser affecting scroll or the user affecting it

Answer 8 · 2018-06-06T07:19:30.000Z

Anyway, I would add a sentence to the Notes in the readme about this issue.