1

I have written a javascript smooth scrolling function to provide navgation on a one-pager. The code is basically like the one at the bottom.

The function is called with the number of pixels to scroll by, which is then divided into 30 steps and then scrolled in a loop until the number is achieved. Thereby I tried both looping variants with setTimeout and requestAnimationFrame.

It works almost perfectly in all desktop browsers as well as my android phone, however Safari and Chrome on IOS devices could not get to the desired point. Testing with alert in each iteration showed, that all values are calculated correctly, however, the actual scrolled amount does not match, resulting in the scrolling stop in the wrong position.

I cannot provide a demo since it is a commercial application in development, also I tried a make a simplified jsfiddle, but this does not actually show the error, so it must be the combination with something else that causes the issue (probably css fixed position, min-height 100vh, scroll event handlers...?).

I definitely think this strange behaviour and should have been noticed by others before. Can anybody provide me with a hint what to do?

function scrollstep(dist) {
    var n = Math.floor(dist / 30 * (1 - Math.abs(scrstp_dist / dist - 0.5)));
    if (Math.abs(scrstp_dist + n) < Math.abs(dist)) {
        scrstp_dist+=   n;
    // alert(n);
        w.scrollBy(0, n);
        w.requestAnimationFrame( function(timestamp) { scrollstep(dist); } );
    } else {
        w.scrollBy(0, dist - scrstp_dist);
    }
}
RK234
  • 11
  • 3
  • I am having similar problems with `window.scrollBy`, which works without problems on desktop chrome, but on Android it interferes with the user scroll (when this is a one-time event without any listener). Cannot find anything, I'm near to disable it for mobiles – GWorking Jan 23 '20 at 08:58
  • At the end I've adopted this alternative https://stackoverflow.com/questions/42261524/how-to-window-scrollto-with-a-smooth-effect – GWorking Jan 23 '20 at 09:24
  • By the way I'm using the checkbox hack, so a colleague came around with the idea that iOS is trying to scroll to the (hidden) input element at the same time the scrolling is supposed to happen. But still no idea how to stop it. [Modified jsfiddle](https://jsfiddle.net/RK234/qb9wyahp/19/) – RK234 Jan 27 '20 at 17:35
  • It turns out that ios tries to keep the hidden inputs on the screen, which had position fixed and visibility hidden. Now that I added a left -1000px rule, the inputs are ignored and the scroll target is reached. – RK234 Jan 30 '20 at 16:56

0 Answers0