Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Permanent jitter in browser scroll #309

Open
darvi-sh opened this issue Sep 28, 2022 · 2 comments
Open

Permanent jitter in browser scroll #309

darvi-sh opened this issue Sep 28, 2022 · 2 comments

Comments

@darvi-sh
Copy link

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
Copy link

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
Copy link

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/[email protected]/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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@darvi-sh @speplinski