纯CSS方法，以防止滚动条的内容推到左侧？

Question

有没有一种方法，以防止从滚动条，内容推送，或整个页面左边的纯CSS？我的意思是没有黑客或任何东西。

我试过两个JavaScript的解决方案：

1）将身体溢出隐藏，存储body.offsetWidth在一个变量，然后溢出可见，然后减去offsetWidth与当前body.offsetWidth和应用的差异右边距。

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

什么不工作：

1）的位置是绝对的。

2）浮动一切左边是一个坏主意。

3）离开滚动条可见（很糟糕）。

4）溢出-γ隐藏使事情用户不友好。

Answer 1

不幸的是，没有其他办法可以防止你的问题。只要使用

     body {
        overflow:hidden;
     }

作为替代方案，我推荐你使用自定义滚动条的框架。或者禁止滚动，如图上面的片段，并用绝对定位和一些JS效仿。当然，你将不得不考虑计算页面的高度和滚动条拇指的偏移。

我希望帮助。

Answer 2

只要给你的身体的100vw这样的宽度：

body{
   width: 100vw;
}

Answer 3

有很多的方法去解决这个问题，尽管通常你不会介意一点点推到左侧：

1. 给overflow-y: scroll到body并确保始终有一个滚动条。
2. 利用一个事实，即视口宽度包括滚动条，而百分比不占它： 一种。给予width: 100vw到body元素，或 湾给予margin-left: calc(100vw - 100%)到html元素，这样滚动条或没有，你有一个固定的区域上工作。
3. 甚至还有绘制在页面上，而不是将其移动到左边的一个过时overflow: overlay属性。

Answer 4

要禁用水平滚动条，您可以使用溢出-X，所以它不会影响你的垂直滚动：

body {
    overflow-x: hidden; 
}