瀏覽器垂直滾動條的高度限制

爲了呈現瀏覽器滾動條而獲得的高度的最大限制在所有瀏覽器中具有不同的值。如果從有限高度增加1px，則瀏覽器滾動不會在頁面中呈現。瀏覽器垂直滾動條的高度限制

FF：17895697px

IE：10737418px

在Chrome有呈現滾動條沒有問題，但它始終在佈局33554400px高度。

沒有爲最大像素高度基於所述瀏覽器的元件的reference，但對於瀏覽器滾動條限制沒有引用。

無論如何克服這個高度問題？即當超過有限高度時，需要出現滾動條。

來源

2016-01-21 Yahwe Raj

這很有趣，但我不確定問題是什麼。 – BSMP

@BSMP：我忘了添加這個問題。現在我已經添加了這個問題。 –

對於它的價值，如果我再向Chrome示例添加10個9，則滾動條消失。 – BSMP

技術上只要任何一個元素不超過最大高度，這是可能的。但出於實際的目的，這是不可能的，因爲一旦整體身高超過極限，瀏覽器行爲會變得很奇怪。

這實際上似乎在IE11上班OK：

div{ 
 
    background: red; 
 
    color: white; 
 
    height: 10737418px; 
 
} 
 

 
.blue { 
 
    background: blue; 
 
    color: white; 
 
}

<div> 
 
    Test 
 
</div> 
 
<div class="blue"> 
 
    Test 
 
</div> 
 
<div> 
 
    Test 
 
</div> 
 
<div class="blue"> 
 
    Test 
 
</div>

所有四種div S顯示了應用CSS。您可以搜索單詞「測試」，並且它會四次滾動到該單詞。

在Firefox中，滾動的高度會比最大尺寸較大，但它會停止渲染下的所有內容：

div{ 
 
    border: 3px solid purple; 
 
    height: 17895697px; 
 
} 
 

 
.blue { 
 
    background: blue; 
 
    color: white; 
 
} 
 

 
.red { 
 
    background: red; 
 
    color: white; 
 
}

<div> 
 
    Test 
 
</div> 
 
<div class="blue"> 
 
    Test2 
 
</div> 
 
<div class="red"> 
 
    Test3 
 
</div>

第一個框有3px的紫色邊框。 Firefox甚至不會渲染底部邊框，而其他2 div完全不可見。瀏覽器可以告訴單詞「測試」在頁面中3次，但使用「查找」不會使頁面滾動到其他div s。它只是坐在那裏。

在Chrome中，事情就變得怪異：

div{ 
 
    border: 3px solid #000000; 
 
    background: #CCCCCC; 
 
    height: 99999999999999999999999999999999999999px; 
 
}

<div> 
 
    Test 
 
</div> 
 
<div> 
 
    Test2 
 
</div> 
 
<div> 
 
    Test3 
 
</div>

第一div根本不會得到一個邊框上，然後由於某種原因，div邊境後重復一遍又一遍第一個div即使在頁面中只有兩個其他div s。 Chrome瀏覽器的「查找」確實認識到「測試」一詞僅在該頁面中出現過3次，但它認爲後兩頁位於頁面的最底部。「測試」一詞在第二次或第三次不可見。

如果您將具有固定高度和溢出的容器中的元素設置爲滾動，則會出現其他奇怪行爲。

我可以看到解決這個問題的唯一方法是確保頁面高度永遠不會超出限制。

如果是靜態內容，只需將其分成多個頁面即可。

如果它是動態的內容，您可以：

設置多少內容被放置在頁面上它產生多少額外的網頁鏈接
地點的限制之前的任意極限內容在同一時間可見
- EX：帶摺疊式佈局的FAQ頁面，因此您必須點擊問題以顯示答案，並且只有一個答案可見同時
廣場上有多少條記錄/返回結果
隱藏/關閉/刪除內容用戶滾動過去的限制（我沒有試過，但如果你能做到這一點我不明白爲什麼它不起作用。）

來源

2016-01-22 16:10:31 BSMP

基於有限高度拆分多個元素是一個不錯的主意，它的工作原理非常完美。謝謝。 –

瀏覽器垂直滾動條的高度限制

回答

相關問題