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

Question

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

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

1) 设置 body 溢出隐藏，将 body.offsetWidth 存储在变量中，然后溢出可见，然后用当前 body.offsetWidth 减去 offsetWidth 并将差值应用到右边距。

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

什么没用：

1) 绝对位置。

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

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

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

Answer 1

很遗憾，没有其他方法可以防止您的问题。只需使用

     body {
        overflow:hidden;
     }

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

希望对您有所帮助。

Answer 2

只需将 body 的宽度设为 100vw，如下所示：

body{
   width: 100vw;
}

Answer 3

要禁用水平滚动条，您可以使用 overflow-x，这样它不会影响您的垂直滚动条：

body {
    overflow-x: hidden; 
}

Answer 4

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

将 overflow-y: scroll 交给 body 并确保始终存在滚动条。
利用视口宽度包括滚动条而百分比不考虑滚动条的事实：

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

b。将 margin-left: calc(100vw - 100%) 赋给 html 元素，无论是否有滚动条，您都有一个固定的工作区域。
甚至还有一个 已弃用 overflow: overlay 属性会覆盖页面而不是将其移至左侧。

Answer 5

只需在具有滚动条的元素上将 overflow-x 设置为隐藏（通常这将是它的主体或其直接子元素）。

我的 nextjs 应用程序遇到了同样的问题，它已经将 overflow-x 设置为隐藏在 body 上。以下解决方案对我有用

#__next{
   overflow-x: hidden;
}

Answer 6

尽管上面所有的答案都是正确的，但我偶然发现了这个问题，我不得不想出另一个解决方案。

由于我的内容宽度占据了整个页面，并且它有一些属性需要在中心对齐，所以它被推到了左边，这些选项并没有阻止它发生。

解决我问题的方法是在悬停时添加滚动条时添加滚动条大小的填充。

我在 Chrome 和 Edge 上进行了测试。这不是一个完美的修复，但足以满足我现在的需要。

.scrollable {
    width: 100%;
    height: 91vh;
    overflow: hidden;
    padding: 0px !important;
}

.scrollable:hover {
    width: 100%;
    height: 91vh;
    overflow-y: auto;
    padding-left: 16.8px !important;
}

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

Pure css way to prevent scrollbar pushing content to the left?

html

css

overflow

scrollbar