squizlabs/HTML_CodeSniffer

Permanent jitter in browser scroll

darvi-sh opened this issue · 2 comments

darvi-sh commented

I have tested this code:

<a href="https://a.link" title="test" aria-label="something">A link</a>

Since the result is only 1 row, total page height is very short.

After pressing the "Run HTML_CodeSnipper" button, the auto scroll functionality reaches the footer and starts to constantly move the page up and down by a pixel or two, but permanently.

The way around it is to refresh the page, after pressing the "Run HTML_CodeSnipper" button, forcefully keep scrolling up and stop the auto scroll from reaching bottom of the page until it times out (probably 1-2 seconds in total).

Please disable the auto scroll, especially for people like me that want no animation. (hint: prefers-reduced-motion)

speplinski commented

It seems that the problem might be related to the improper clearing of the interval, and this issue appears, for example, in the Chrome browser. It would be beneficial to add extra conditions to check if the scrolling has reached its target or surpassed the boundaries. Here is the improved version of the code:

if (currScrollY === targetScrollY || (sign === 1 && currScrollY >= targetScrollY) || (sign === -1 && currScrollY <= targetScrollY)) {
    clearInterval(interval);
}
speplinski commented

Alternatively, you can also simplify the code using the smoothscroll-polyfill along with the scrollIntoView() function to achieve a smoother scrolling experience.

Include the script in the <head> section of your HTML file:

<script src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"></script>

Then activate the polyfill and change the scrollToElement function:

smoothscroll.polyfill();

function scrollToElement(element) {
    element.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
    });
}

This version of the code is easier to read and more efficient.