在滚动条下面展开HTML文档。
在滚动条下面展开HTML文档。
每当我有内容使页面的高度增加时，渲染的网站上会出现一个滚动条。然而，滚动条会将我的内容向左推动滚动条的宽度，所以当我导航到一个高度小于页面高度的页面时，页面宽度会发生明显的调整。是否有可能让滚动条位于所有HTML内容的顶部？类似于Chrome在iOS上的滚动方式。理想情况下，像overflow:absolute这样的CSS属性，滚动条出现时内容不被裁剪，这将是最好的，但我知道这并不存在。
编辑：
在下面的图片中，您可以看到滚动条有一个白色的背景，并且将我的HTML内容向左推动。我想要的是HTML内容位于滚动条的下方，就像滚动条在右侧具有绝对定位一样。
我与一个和我运行相同版本Chrome的同事商量过，他的滚动条正好符合我的要求。也许这是Google的AB测试之一？
展开滚动条下面的HTML文档的原因是，本机滚动条样式的限制。在Chrome和IE浏览器中，可以使用以下代码来自定义滚动条样式：
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
然而，火狐浏览器对此不太友好，该问题已在https://bugzilla.mozilla.org/show_bug.cgi?id=77790进行了记录，但目前已经不再更新。
如果想在火狐浏览器中实现自定义滚动条样式，可以选择使用自定义滚动条替代方案。
关于如何弥补滚动条的位置变化，可以参考How to compensate for Vertical Scrollbar when it is not yet present中的解释。这种方法运行良好，但是大多数代码示例无法展示效果，所以您需要自行尝试。
另外，有关OSX消失滚动条问题（不确定是否适用于现代版本的OSX），可以参考CSS - Overflow: Scroll; - Always show vertical scroll bar?中的解决方案。
从以上内容可以整理出以下问题的原因和解决方法：
问题：如何在滚动条下展开HTML文档？
原因：
1. 不同的浏览器对滚动条的处理方式不同。
2. 一些浏览器（包括Safari和某些版本的Chrome）已经可以实现所需的效果，但大多数其他浏览器会强制设置滚动条的背景颜色和宽度，并将内容推至一边来腾出空间。
3. 任何负边距或宽度大于100%的技巧都不会起作用，或者会导致一些内容在许多浏览器中被非透明的滚动条遮挡（在其他浏览器中则会显示在屏幕外）。
解决方法：
1. 如果滚动条出现时的“跳动”效果太分散注意力，可以使用overflow-y:scroll来强制始终显示滚动条。
2. 不能依赖特定的滚动条宽度或样式，因为浏览器制造商可能会随时更改它们，所以在网站中编写依赖特定滚动条类型的代码并不是一个好主意。