如何在垂直滾動條尚未存在的情況下補償垂直滾動條

也許這是一個簡單的解決方法，但它已經讓我瘋狂了很長時間，所以我最終決定了解是否存在解決方案。如何在垂直滾動條尚未存在的情況下補償垂直滾動條

簡而言之，我將大部分網頁放在寬視角端口中。

例如，一個視圖端口可能是1028px，我希望我的頁面寬度僅爲960px。

所以我的CSS是這樣的：

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

沒有異議。

問題出現在我開始動態頁面的時間比頁面高度短的時候，然後我的頁面在屏幕底部展開（通過jQuery slideOut等）並導致垂直滾動條出現。

它最終使頁面在slideOut期間閃爍，然後在slideIn期間向右閃爍。

有沒有辦法通過CSS強制20px右邊距，仍然利用margin:0 auto;？

謝謝。

您可以嘗試在'html'或'body'元素上使用'overflow-y：scroll'，但我不確定這是否可行。同時你應該可以用3行javascript/jquery做這個，然後把這個函數附加到'onresize'事件。 – 2012-03-10 22:37:06

另一種方法是強制滾動條始終存在。有一個CSS選項，但我不記得它是什麼。 – 2012-03-10 22:38:54

@ErickPetru不，那不是。 – 2012-03-10 22:43:40

當頁面內容不再適合垂直時，瀏覽器會在窗口的右側添加一個滾動條。這會更改瀏覽器窗口中的可用寬度，因此，相對於窗口右側居中或定位的任何內容都會向左移動一點。這很常見。

有很多方法可以控制這個，但最常見的是要麼通過控制窗口上的overflow-y屬性來使其始終具有滾動條或從不具有滾動條。

設置overflow-y: scroll將強制滾動條始終在那裏。

設置overflow-y: hidden將強制在那裏永遠不會滾動條。

2012-03-10 22:50:00 jacktheripper

好的，謝謝@jacktheripper。 – 2012-03-10 23:28:35

注意：overflow-y: hidden可防止用戶通過任何方式向下滾動，從而無法訪問低於下方視口的任何內容。

2017-01-19 02:15:51 PERoqe

回答