使主滾動條始終可見

Question

當用戶訪問網頁時（當頁面沒有足夠的內容來觸發滾動條的激活時），使瀏覽器的垂直滾動條保持可見狀態所需的CSS是什麼？

Answer 1

html { 
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll; 
} 

這使滾動條總是可見的，只有在需要時纔會激活。

更新：如果上述不起作用，只是使用這可能。

html { 
    overflow-y:scroll; 
} 

Answer 2

html { 
    overflow-y: scroll; 
} 

這就是你想要的嗎？

不幸的是，Opera 9.64應用於HTML或BODY時似乎忽略了這個CSS聲明，儘管它適用於其他塊級元素，如DIV。

Answer 3

html {height: 101%;} 

我用這種跨瀏覽器解決方案（注：我一直使用DOCTYPE聲明的第一行，我不知道，如果它工作在怪異模式，從來沒有測試）。

這將總是在每個頁面顯示一個ACTIVE垂直滾動條，垂直滾動條只能滾動幾個像素。

當頁面內容爲比瀏覽器的可見區域（查看端口）短時，仍然會看到垂直滾動條處於活動狀態，並且它只能滾動幾個像素。

如果您正在使用該解決方案您的CSS代碼也驗證了W3C因爲你不使用非標準的CSS迷戀CSS驗證（我obesessed只能用HTML驗證）屬性，如-moz-scrollbars-vertical

Answer 4

設置身高到101％是我解決問題的方法。 當您在切換超過視口高度的頁面和不在視口高度的頁面之間進行切換時，您的頁面將不再「輕彈」。

Answer 5

我能夠通過將它添加到body標籤中來獲得此功能。對我來說更好，因爲我沒有任何關於html元素的東西。

body { 
    overflow-y: scroll; 
} 

Answer 6

在過去的幾年中發生了變化。上述答案在所有情況下都不再有效。蘋果正在推行到處都是disappearing scrollbars。 Safari瀏覽器，Chrome瀏覽器，甚至Firefox上的MacOs（和iOs）只在實際滾動時顯示滾動條 - 我不知道當前的Windows/IE。然而，在Webkit上有非標準的方式來設置scroll bars（IE很久以前就放棄了）。

Answer 7

另一種方法是將html元素的寬度設置爲100vw。在許多瀏覽器上，如果不是這樣，這會消除滾動條對寬度的影響。

html { width: 100vw; } 

Answer 8

將此代碼添加到您的CSS樣式表：

html {overflow-y: scroll;} 

這一切就是這麼簡單！

Answer 9

確保溢出設置爲「滾動」而不是「自動」。 在OS X Lion中，使用，設置爲「滾動」的溢出行爲更像自動化，滾動條在使用時仍會顯示。所以如果上面的解決方案似乎沒有工作，這可能是爲什麼。

這是你需要什麼來解決它：

::-webkit-scrollbar { 
    -webkit-appearance: none; 
    width: 7px; 
} 
::-webkit-scrollbar-thumb { 
    border-radius: 4px; 
    background-color: rgba(0, 0, 0, .5); 
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5); 
} 

您可以相應風格，如果你不喜歡默認的。

Answer 10

body { height:101%; }將「裁剪」較大的頁面。

相反，我使用：你有什麼想法，有什麼版本的FF的帶來了'溢出y`支持

body { min-height:101%; }