防止滚动条导致的布局偏移

问题

当内容溢出页面并且滚动条出现时，内容会被推/移到左侧，反之亦然，当滚动条消失时，内容会被推/移到右侧：

这种恼人的布局偏移可以通过多种方式避免。在本文中，我将逐一介绍：

1. 始终显示滚动条

这是最简单也是最丑陋的解决方案。

body {
  overflow-y: scroll;
}

2.scrollbar-gutter财产

该scrollbar-gutter属性正是为此目的而制定的。将其设置为stable将保留滚动条的空间并防止布局偏移。

html {
  scrollbar-gutter: stable;
}

但是...它在 Safari 中不起作用，并且滚动条轨道将始终显示在页面上，这是不可取的。

100vw*. 关于和的一点说明100%

100vw在继续讨论下一点之前，有必要了解和之间的区别100%：

• 100vw：包括滚动条在内的全宽。
• 100% ：不包括滚动条的全宽。

3. 将内容向右移动

当滚动条不显示时，100vw和100%相等，当滚动条显示时，它们之间的差值等于滚动条的宽度。

因此，如果我们将内容向右移动100vw和的差值100%，就可以防止布局偏移。为此，我们可以padding-left在父元素/容器元素上使用：

.container {
  padding-left: calc(100vw - 100%);
}

来源

100vw4. 在宽度父级内定位

由于滚动条不会影响vw单元，我们可以通过在单元中设置父级/容器的宽度vw并在其中居中/定位元素来解决问题：

.container {
  width: 100vw;
  /* elements inside won't be affected by scrollbars */
  display: flex;
  align-items: center;
  justify-content: center;
}

来源

应用第4种方法后的结果：