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.

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

Improve "Scroll lock" scrollbar width for Dialog component #1457

Merged
merged 2 commits into from
May 16, 2022

Conversation

RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented May 16, 2022

The idea is as follow:
If you currently have a scrollbar, and you open a Dialog then we enable a "Scroll lock" so that you can't scroll in the background behind the modal. We can achieve this by adding a overflow: hidden; to the html.

The issue is that by doing this, we lose the scrollbar and therefore the page will jump to right because now there is a bit more room.

To account for this, we set a padding-right on the html of the scrollbarWidth in pixels. This counteracts the visual jump you would see.

The issue with this approach is that there could still be a scrollbar once we add the overflow: hidden. This can happen if you use new css features like the scrollbar-gutter: stable;.

To take this into account, we will measure the scrollbar again after we set the overflow: hidden. Now we will only apply that counteracting offset if there would actually be a jump by measuring the before and after widths and applying the diff if there is one.

Fixes: #1436

The idea is as follow:
If you currently have a scrollbar, and you open a Dialog then we enable
a "Scroll lock" so that you can't scroll in the background behind the
modal. We can achieve this by adding a `overflow: hidden;` to the
`html`.

The issue is that by doing this, we lose the scrollbar and therefore the
page will jump to right because now there is a bit more room.

To account for this, we set a `padding-right` on the `html` of the
scrollbarWidth in pixels. This counteracts the visual jump you would
see.

The issue with this approach is that there could *still* be a scrollbar
once we add the `overflow: hidden`. This can happen if you use new css
features like the `scrollbar-gutter: stable;`.

To take this into account, we will measure the scrollbar again after we
set the `overflow: hidden`. Now we will only apply that counteracting
offset if there would actually be a jump by measuring the before and
after widths and applying the diff if there is one.
@vercel
Copy link

vercel bot commented May 16, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
headlessui-react ✅ Ready (Inspect) Visit Preview May 16, 2022 at 10:45AM (UTC)
headlessui-vue ✅ Ready (Inspect) Visit Preview May 16, 2022 at 10:45AM (UTC)

@simirka
Copy link

simirka commented Aug 31, 2022

@RobinMalfait If you have fixed the Header you still see the jumps of the UI because padding should be added to the body instead of the HTML tag. I think there should be a possibility to switch between these tags.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Opening or closing Dialogs with scrollbar-gutter: stable results in underlying page shifts
2 participants