浏览器垂直滚动条的高度限制答案

【问题标题】：Height limitations for browser vertical scroll bar浏览器垂直滚动条的高度限制
【发布时间】：2016-04-28 04:04:01
【问题描述】：

渲染浏览器滚动条的最大高度限制在所有浏览器中都有不同的值。如果从限制高度增加 1px，则浏览器滚动将不会在页面中呈现。

FF: 17895697px

IE: 10737418px

在Chrome中渲染滚动条是没有问题的，但是在布局中它的高度总是33554400px。

有一个reference 表示基于浏览器的元素的最大像素高度，但没有关于浏览器滚动条限制的参考。

有没有办法克服这个高度问题？即超出限制高度时需要出现滚动条。

【问题讨论】：

【解决方案1】：

技术上只要任何一个元素不超过最大高度，这是可能的。但出于实际目的，这是不可能的，因为一旦整体高度超过限制，浏览器的行为就会变得奇怪。

这实际上在 IE11 中似乎可以正常工作：

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>

所有四个divs 都显示应用了CSS。您可以搜索单词“test”，它会滚动到该单词全部四次。

在 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 个 divs 根本不可见。浏览器可以分辨出“测试”一词在页面中出现了 3 次，但使用“查找”不会使页面滚动到另一个 divs。它就在那里。

在 Chrome 中，事情变得很奇怪：

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

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

第一个 div 根本没有边框，然后由于某种原因，div 边框在第一个 div 之后一遍又一遍地重复，即使只有两个其他 divs 在页。 Chrome 的“查找”确实识别出“测试”一词仅在页面中出现 3 次，但它认为后两个位于页面的最底部。第二次或第三次看不到“测试”一词。

如果您将这么高的元素放入具有固定高度且溢出设置为滚动的容器中，则会出现其他奇怪的行为。

我认为解决此问题的唯一方法是确保页面高度永远不会超过限制。

如果是静态内容，只需将其拆分为多个页面即可。

如果是动态内容，您可以：

【讨论】：