Improve "Scroll lock" scrollbar width for Dialog component
#1457
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 thehtml.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-righton thehtmlof 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 thescrollbar-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