spamming smooth scroll doesn’t work in Chrome about smoothscroll

[jeremenichelli]

@alexherbo2 I need more insight and have a bunch of questions:

• Do you get an error?
• The script stops working?
• Do you have to wait til the end of the scrolling to trigger it again?
• What's the behavior on Firefox where the standard is implemented?

[alexherbo2]

Hello,

• No error
• Don’t stop working
• I have to wait until the end of the scrolling
• I don’t have to wait

Use case is to map a key to smooth scroll.

You can source the code above in Chrome / Firefox and hold a key to see.

[ghybs]

Hi,

More details about what behaviour is seen vs what is expected would definitely have helped.
Here is a live test case: https://jsfiddle.net/0aLaLskb/

Although "keydown" event is correctly triggered in loop while long-pressing / holding a key down in Chrome and FF, in the former only a small scroll is initially performed, then it looks to "hang" as long as the key is maintained down, and performs another small scroll after the key is released. Whereas in FF the scroll continues down as long as the key is pressed, or until reaching the bottom of the page.

What probably happens is that for each polyfilled smooth scroll request, a new step loop is launched, even if another one is already in progress.
Then they use the current scroll position as start position, and compute the target position from there.
As a consequence, all of them use the same start position, and compute the same target position.

We can assume that FF applies the change from the target position on the contrary, which leads to cumulating the scroll requests.
I do not know what the spec says about such use case.

BTW, if reading the scroll position while it is animating, which value should it report? The current as per the animation frame (as currently done for sure by this polyfill), or the target one? (which would naturally lead to FF cumulative scrolls behaviour, but not sure how to emulate such functionality if desired?)

In my case I worked around by using a flag to wait for the end of the scrolling, using SCROLL_TIME for timeout value.
Example: https://jsfiddle.net/0aLaLskb/1/
This correctly cumulates scroll requests, but the animation is totally different from FF (e.g. in this case of relative scrolls / scrollBy, you get a series of small scrolls, whereas in FF it is like a scroll animation becoming "bigger")

[jeremenichelli]

This one is really hard, though we could mitigate a failing scrolling measurement preventing any scroll at all from our polyfill, trying to achieve any acumulating scorlling case from inside the script is almost impossible. Not only a keydown could be triggering a new scroll animation cycle, but anything, a keydown or keyup, a mousewheel event, a loop, a setTimeout or setInterval. We could provide a escape hatch that will not work as browsers but halt scrolling while animating.

For now, I don't see this doable, of course, if anyone wants to give it a try and provide a set of test case it would be more than welcome 💯