Question

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

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

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

2）计算offsetWidth并将其应用于每个调整大小的包装div。

什么不起作用：

1）绝对位置。

2）将所有东西浮动到左边是一个坏主意。

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

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

Answer 1

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

     body {
        overflow:hidden;
     }

作为替代方案，我建议您对自定义滚动条使用框架。或者禁用上面的代码段中所示的滚动条，并使用绝对位置和一些JS对其进行仿真。当然，您将不得不考虑计算页面的高度和滚动条滑块的偏移量。

我希望有帮助。

Answer 2

像这样给你的身体一个100vw的宽度：

body{
   width: 100vw;
}

Answer 3

有很多方法可以解决此问题，尽管通常您不介意向左推动一点

将overflow-y: scroll赋予body，并确保始终有滚动条。
利用视口宽度包括滚动条而百分比不占滚动条的事实：

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

b。将margin-left: calc(100vw - 100%)赋予html元素，无论是否使用滚动条，您都需要一个固定的区域。
甚至还有一个已弃用的 overflow: overlay属性会在页面上绘制，而不是将其向左移动。

Answer 4

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

body {
    overflow-x: hidden; 
}

Answer 5

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

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

#__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方式阻止滚动条向左推送内容？

6 个答案: