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

Commits on May 16, 2022

  1. improve scroll lock, scrollbarWidth

    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.
    RobinMalfait committed May 16, 2022
    Configuration menu
    Copy the full SHA
    12e8f35 View commit details
    Browse the repository at this point in the history
  2. update changelog

    RobinMalfait committed May 16, 2022
    Configuration menu
    Copy the full SHA
    2218fa4 View commit details
    Browse the repository at this point in the history