Preventing the Layout Shifting Caused by Scrollbar
Wonje Jangcss • Wed May 08 2024 16:19
When the scrollbar appears, the component within the container where the scrollbar was created may shift due to the scrollbar's width. To prevent this layout shift, we need to adjust the style of the container or the component itself. Here, I introduce two methods to prevent layout shifting caused by the scrollbar.
Container Element)
Add padding equal to scrollbar with
css
1.container {
2 padding-left: calc(100vw - 100%);
3}
Fixed/Absolute Element)
Use vw instead of %
css
1.element {
2 position: fixed;
3 top: 20px;
4 left: 50vw;
5 transform: translateX(-50%);
6}