1

当内容超出最大高度时，我希望有一个带有滚动条的最大高度 div：

<div id="scrollable-div">A bunch of content that might be long.</div>

#scrollable-div {
  max-height: 50px;
  overflow: auto;
}

问题是旧的移动浏览器（例如 Android < 3.0）不支持此功能。所以我想使用 Modernizr 来检测溢出滚动支持，并在不存在支持时回退到 no max-height （如此处所建议：Android browser bug? div overflow scrolling）：

#scrollable-div {
  max-height: 50px;
  overflow: auto;
}

.no-overflowscrolling #scrollable-div {
  max-height: none;    
}

然而，Modernizrno-overflowscrolling甚至在我知道它overflow: auto有效的现代桌面浏览器中也添加了这个类。我已经使用 Firefox 24.0、Chrome 30.0.1599.101 和 Safari 6.0.5 (8536.30.1) 进行了测试，Modernizrno-overflowscrolling为每一个都添加了。此外，在 javascript 控制台中Modernizr.overflowscrolling返回。false

我怀疑这里有一些我不理解的东西。有人可以解释一下吗？

4

1 回答 1

1

我弄清楚了我不明白的地方。Modernizr 的overflowscrolling测试是针对-*-overflow-scrolling某些浏览器实现的 CSS 属性。它不是测试是否overflow:[auto|scroll]在浏览器中工作的测试。-webkit-overflow-scrolling是一个附加的 css 属性，用于控制 iOS 中的滚动是否会像原生 iOS 控件一样具有“动量”。桌面浏览器显然不支持它，因为它是特定于移动设备的属性；这就是 Modernizr 添加no-overflowscrolling课程的原因。

overflowscrolling != 支持溢出：滚动

于 2013-11-15T23:21:48.623 回答