防止滚动条向左推送内容的纯css方法？

Question

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

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

1) 将 body 设置为溢出隐藏，将 body.offsetWidth 存储在一个变量中，然后溢出可见，然后用当前的 body.offsetWidth 减去该 offsetWidth 并将差异应用于右边距。

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

什么不起作用：

1) 绝对位置。

2）将所有东西都向左浮动是个坏主意。

3）让滚动条可见（看起来很糟糕）。

4）溢出-y隐藏使用户不友好。

Answer 1

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

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

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

   A。给予width: 100vw元素body，或

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

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

Answer 2

不幸的是，没有其他方法可以防止您的问题。只需使用

     body {
        overflow:hidden;
     }

作为替代方案，我建议您使用自定义滚动条框架。或者禁用滚动条，如上面的代码片段所示，并使用绝对定位和一些 JS 来模拟它。当然，您必须考虑计算页面的高度和滚动条拇指的偏移量。

我希望这有帮助。