如何在不存在时补偿Vertical Scrollbar

Question

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

简而言之,我将大多数网页放在宽视口中.

例如,一个视口可能是1028px,我希望我的页面宽度只有960px.

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

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

没问题.

当我启动一个比页面高度更短的动态页面然后我的页面在屏幕底部下方展开(通过jQuery slideOut等)并导致垂直滚动条出现时,会出现问题.

最终在slideOut期间使页面闪烁,然后在slideIn期间向右闪烁.

有没有办法通过CSS强制20px右边距并仍然利用margin:0 auto;？

谢谢.

Answer 1

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

有许多方法可以控制它,但最常见的是要么通过控制overflow-y窗口上的属性来使它总是有一个滚动条或永远不会有滚动条.

设置overflow-y: scroll将强制滚动条始终存在.

设置overflow-y: hidden将强制永远不会滚动条.