Question

当内容超出最大高度时，我想要一个带滚动条的max-height div：

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

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

问题是旧版移动浏览器（例如Android＆lt; 3.0）不支持此功能。所以我想使用Modernizr来检测溢出滚动支持，并在支持不存在时回退到没有max-height（如下所示：Android browser bug? div overflow scrolling）：

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

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

然而，即使在我知道no-overflowscrolling有效的现代桌面浏览器中，Modernizr也在添加overflow: auto类。我已经使用Firefox 24.0，Chrome 30.0.1599.101和Safari 6.0.5（8536.30.1）进行了测试，Modernizr为每个测试添加了no-overflowscrolling。此外，Modernizr.overflowscrolling会在javascript控制台中返回false。

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

Answer 1

我想出了我不理解的东西。 Modernizr的overflowscrolling测试用于某些浏览器实现的-*-overflow-scrolling CSS属性。它不是对overflow:[auto|scroll]在浏览器中是否有效的测试。 -webkit-overflow-scrolling是一个额外的css属性，它控制iOS中的滚动是否具有像本机iOS控件一样的“动量”。桌面浏览器显然不支持它，因为它是特定于移动设备的属性;这就是Modernizr添加no-overflowscrolling类的原因。

overflowscrolling！=支持溢出：滚动

Modernizr报告即使对于现代桌面浏览器也没有溢出滚动？

1 个答案: