search

sunmockyang / animate-scroll-js

Lightweight javascript library to scroll to element without jQuery
MIT License
28 stars 8 forks source link

Lag when using CSS smooth scroll-behavior #7

Open rolandtoth opened 6 years ago

rolandtoth commented 6 years ago

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?

sunmockyang commented 6 years ago

What browser are you using?

On Wed, May 16, 2018, 6:34 AM Roland Toth, notifications@github.com 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 https://github.com/sunmockyang/animate-scroll-js/issues/7, or mute the thread https://github.com/notifications/unsubscribe-auth/ACpa3jXNz0-hA5p5DN62sHaM6M65Np7pks5tzADKgaJpZM4UBD4a .

rolandtoth commented 6 years ago

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

rolandtoth commented 6 years ago

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.

sunmockyang commented 6 years ago

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 notifications@github.com 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 https://github.com/sunmockyang/animate-scroll-js/issues/7#issuecomment-389766045, or mute the thread https://github.com/notifications/unsubscribe-auth/ACpa3g3xPXmAS9CA1lXIptVEL46W-Ejpks5tzSDMgaJpZM4UBD4a .

sunmockyang commented 6 years ago

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 sunmock@gmail.com 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 notifications@github.com 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 https://github.com/sunmockyang/animate-scroll-js/issues/7#issuecomment-389766045, or mute the thread https://github.com/notifications/unsubscribe-auth/ACpa3g3xPXmAS9CA1lXIptVEL46W-Ejpks5tzSDMgaJpZM4UBD4a .

rolandtoth commented 6 years ago

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.

sunmockyang commented 6 years ago

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

rolandtoth commented 6 years ago

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