当垂直滚动条尚不存在时，如何补偿垂直滚动条

Question

也许这是一个简单的修复，但它已经让我疯狂了很长一段时间，所以我最终决定看看是否存在解决方案。

简而言之，我将大部分网页集中在宽视图端口中。

例如，视图端口可能能够为1028px，我希望我的页面宽度仅为960px。

所以我的css看起来像这样:

#pageWrapper { /* page width is 960 pixels */
    margin:0 auto;
    width:960px;
}

没问题。

当我启动一个比页面高度短的动态页面，然后我的页面展开（通过jQuery slideOut等）时，问题就出现了。）在屏幕底部下方并导致垂直滚动条出现。

它最终使页面在滑动过程中向左闪烁，然后在滑动过程中向右闪烁。

有没有办法通过css强制20px右边距，仍然利用 margin:0 auto; ?

谢谢.

Answer 1

当页面的内容不再垂直适合时，浏览器会在窗口的右侧添加一个滚动条。这会更改浏览器窗口中的可用宽度，因此任何相对于窗口右侧居中或定位的内容都将向左移动一点。这是很常见的。

有很多方法可以控制这一点，但最常见的是通过控制 overflow-y 窗口上的属性。

设置 overflow-y: scroll 将强制滚动条始终在那里。

设置 overflow-y: hidden 将迫使那里永远不会有滚动条。

Answer 2

NB: overflow-y: hidden 防止用户通过任何方式向下滚动，有效地呈现下视口下方的任何内容无法访问。