每當瀏覽器添加滾動條時，內容都會水平跳轉

我使用固定寬度的主體和自動邊距將我的內容居中放置在頁面中間。當內容超過頁面高度並且瀏覽器添加滾動條時，自動頁邊距會強制內容跳到左側滾動條寬度的一半。每當瀏覽器添加滾動條時，內容都會水平跳轉

比較outerHeight和window.innerHeight是否解決此問題的適當方法？有沒有解決這個問題的另一種方法？

我認爲這應該是足夠的信息的問題，但讓我知道如果我可以回答其他任何事情。

編輯澄清：我不想強制滾動條出現。

沒有你想象的那麼容易.. – Halcyon 2012-02-08 21:51:24

@elclanrs在你是一個混蛋之前閱讀我的問題。我不想強制滾動條，我試圖在出現時停止跳轉。 – 2012-02-08 21:56:13

然後，像http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php可能會幫助 – elclanrs 2012-02-08 21:59:28

您可以強制滾動條總是顯示：

2012-02-08 21:49:24

看到我的編輯。如果不需要，我不想強制滾動條。 – 2012-02-08 22:00:10

我碰到的這個問題我自己，我發現兩種方法來解決這個問題：

始終力滾動條出現： body { overflow-y: scroll; }將其設置爲html在所有瀏覽器中都不起作用，或者可能會給出double如果滾動條確實出現。
如果沒有滾動條，添加一個在頁面右邊距增加30個像素的類。

我選擇選項1，但我不知道這是否適用於所有的瀏覽器（尤其是舊的）。

Facebook的使用選項2.

2012-02-08 21:50:33 Halcyon

選項1適用於所有瀏覽器，默認情況下，舊版瀏覽器在所有頁面上都包含滾動條。 Facebook做＃2，因爲他們不希望滾動條顯示，如果沒有必要。 – thenetimp 2012-02-08 21:52:26

我認爲它給一些瀏覽器上的_double_滾動條問題（滾動條將在'body'中）。已經有一段時間了，我真的不想再測試一次了：P – Halcyon 2012-02-08 21:54:29

啊是的......但如果我不想強制滾動條？如果我不希望瀏覽器在不需要滾動條的時候該怎麼辦？ – 2012-02-08 21:58:47

使用此CSS：

body { overflow-y: scroll; }

2012-02-08 21:54:07

我就離開這個鏈接在這裏，因爲它似乎是一個完美的解決方案對我說：

他所做的是添加此css：

@media screen and (min-width: 960px) { 
    html { 
     margin-left: calc(100vw - 100%); 
     margin-right: 0; 
    } 
}

這會將內容向左移動到滾動條的大小，所以當它出現時，內容已經移動。這適用於overflow: auto;適用於html標記的居中內容。媒體查詢會禁用手機，因爲它非常明顯地區分了邊距寬度。

你可以在這裏看到一個例子：

2016-02-16 16:34:28 xabitrigo

非常好！我不希望*兩個邊距，所以我應用了負右邊距：margin-right：calc（-100vw + 100％）; 另外，我不得不殺死底部滾動條：overflow-x：hidden; – ulu 2017-07-01 10:47:44

的過程是：

html { 
    overflow-y: scroll !important; 
}

這將顯示滾動條即使在那裏，不需要任何滾動條。

2016-08-05 12:52:01

回答