html - 防止滚动条将内容推送到左侧的纯 css 方法？

Question

有没有办法用纯css防止滚动条推送内容，或者整个页面向左？我的意思是没有黑客或任何东西。

我尝试了两种 javascript 解决方案:

1)将body设置为overflow hidden，将body.offsetWidth保存在一个变量中，然后overflow visible，然后用当前的body.offsetWidth减去offsetWidth，并将差值应用到右边距。

2) 计算 offsetWidth 并在每次调整大小时将其应用于包装器 div。

什么没用:

1) 绝对位置。

2) 将所有内容都向左浮动是个坏主意。

3) 让滚动条可见(看起来很糟糕)。

4) Overflow-y hidden 使用户不友好。

Answer 1

有很多方法可以解决这个问题，但通常您不会介意向左推一点:

1. overflow-y: scroll 到 body 并确保 始终有一个滚动条。

   <

2. 利用视口(viewport)宽度包括滚动条而百分比不考虑滚动条的事实:

   一个。将 width: 100vw 赋给 body 元素，或者

   将 margin-left: calc(100vw - 100%) 赋给 html 元素，无论是否有滚动条，您都有一个固定区域可以处理。

3. 甚至还有一个弃用 overflow: overlay在页面上绘制而不是将其向左移动的属性。