Files
headlessui/packages/@headlessui-react/src
Robin Malfait 7344846fad Improve "Scroll lock" scrollbar width for Dialog component (#1457)
* 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.

* update changelog
2022-05-16 12:47:19 +02:00
..
2022-05-11 15:03:54 +02:00
2022-01-27 16:42:47 +01:00
2022-01-27 16:42:47 +01:00
2021-04-02 15:55:15 +02:00