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

Scrollbar breaks when overflow property is applied to <html> tag #477

Closed
stepanjakl opened this issue Nov 16, 2022 · 6 comments
Closed

Scrollbar breaks when overflow property is applied to <html> tag #477

stepanjakl opened this issue Nov 16, 2022 · 6 comments
Labels
🍐 improvement

Comments

@stepanjakl
Copy link

Firstly, congrats on releasing v.2 @KingSora, a great library!!

Describe the bug

I have a modal component on a site and when it is open the <html> tag is set overflow: hidden property in order to disable scrolling. However, after implementing your library, when overflow gets applied the whole page automatically scrolls to the top and the scrollbar stops working.

To Reproduce

You can simply test it on your official site with the Dev inspection tools and applying overflow style property to the <html> tag once you scrolled a bit from the top.

Screenshot 2022-11-16 at 23 39 24

Environment

  • Used Operating System(s): macOS
  • Used Browser(s) (with version): Chrome 107
@KingSora
Copy link
Owner

Good day @stepanjakl :)

I see... this comes from the fact that the browsers viewport is the html element. If it has no overflow, the page isn't scrolled, thats why the scrollbar isn't moving. What you scroll in this case is only the body element, which then counts as a separate container. You can verify this by trying to do window.scrollTo(100, 100) while the html element has the overflow: hidden style.

For now you have two options to work around this:

  1. Set the overflow.x and overflow.y option to 'hidden' instead of 'scroll' and switch it back afterwards. (this is my recommended workaround)
  2. Add a style which sets overflow: hidden on both, the html and body element. Something like:
html.overflow-hidden,
html.overflow-hidden > body {
  overflow: hidden !important;
}

The important is needed to overrule the plugins styles.

I'll take a look whether I can improve this behavior without adding too much code and without adding more complexity to the plugin.

@stepanjakl
Copy link
Author

Hello @KingSora,

Thank you for the answer and detailed explanation. I definitely understand what's going on. I am using Alpine.js and its Focus plugin with .noscroll modifier, which automatically applies inline overflow: hidden property to the <html> tag when activated. So unfortunately, I don't have control over the styling.

When the OverlayScrollbars library isn't included on the site applying overflow property doesn't cause the jump. It would be really nice if there was some check baked into the core of the library to prevent it like you said.

@KingSora
Copy link
Owner

@stepanjakl I've published v2.0.1 which should fix your issue :)

You can check the full changelog here

Please try it out and leave me some feedback whether it works as expected

@stepanjakl
Copy link
Author

@KingSora That was quick and it's working well now! Thanks a lot :)

@KingSora
Copy link
Owner

Jsem rád, že to funguje :)

Glad it works :)

@stepanjakl
Copy link
Author

Jsem rád, že to funguje :)

Glad it works :)

Hahah, já také.

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

No branches or pull requests
2 participants
@KingSora @stepanjakl