滾動條在瀏覽器和div邊距0自動跳躍

我正在使用div＃wrapper margin: 0 auto來居中div，在這個頁面上有滾動條，但是當它轉換到沒有滾動條的第二頁時，它看起來像跳躍因爲我猜沒有滾動條。滾動條在瀏覽器和div邊距0自動跳躍

<body> 
<div id="wrap"> 
<div id="wrapper"> 
.... 

#wrapper { width: 970px; margin: 0 auto; }

什麼是最好的解決方案，這不會讓它跳動？

來源

2011-06-15 cicakman

最好的解決方案是不要居中包裝。滾動條是您瀏覽器的一部分，通過添加它可以重新設置HTML渲染區域的大小。 – 2011-09-20 22:50:23

我碰到的這幾次，我發現最好的辦法是強制每個頁面上Ÿ滾動條，即使它不需要使用樣式表：

html { overflow-y: scroll; }

這將意味着頁面上始終有一個正確的滾動條，但會根據需要啓用/禁用，並防止跳轉。

來源

2011-06-15 12:55:58

它沒有解決問題，如果SMB需要滾動條... – brabertaser19 2015-07-01 18:50:39

由於某種原因，它只適用於當我添加到身體的風格，而不是HTML – guillefix 2016-03-07 18:41:54

如果您不想在每個頁面上強制使用Y滾動條，則可以使用視圖端口寬度來計算邊距。這停止了我的自動跳躍。

@media (min-width: 960px) { 
    .container { 
     margin-left: calc(50vw - 480px); 
     width: 960px; 
    } 
}

來源

2016-03-12 08:04:45 winry

向您的html標記添加計算的邊距將在左側創建一個邊界，等於滾動條存在時的右側滾動條。這將停止跳躍。

html { 
    margin-left: calc(100vw - 100%); 
}

Original Source

來源

2016-11-25 22:41:43 Darryls99

組HTML寬度爲等於視口和關閉水平滾動，以避免出現水平滾動條時垂直一將擴展HTML。

html { 
    width: 100vw; 
    overflow-x: hidden; 
}

來源

2017-06-20 15:19:54

我希望我可以給這個代碼1000分。我一直試圖解決一個問題幾個小時，這是解決方案。當我的網站（基於bootstrap）的方向是RTL時，我有一些奇怪的跳躍行爲。在頁面加載時，內容在最右邊出現1/10秒，然後跳轉到中心（應該如'margin：0 auto'），並應用延遲上的「col-md-3」寬度。這'css'解決了所有這些問題，爲什麼，不知道:-) – 2017-11-25 18:00:10

滾動條在瀏覽器和div邊距0自動跳躍

回答

相關問題