最近，我偶然发现了一个与浏览器滚动条有关的相当有趣的行为。这里是演示此链接：http : //jsfiddle.net/5L7tyswh/5/
HTML：
<div class='container'>
<div class='fix' />
</div>
CSS：
body {
margin: 0;
}
.container {
position: absolute;
overflow: auto;
width: 100%;
height: 100%;
max-height: 400px;
max-width: 400px;
}
.noscroll {
overflow: hidden;
}
.fix {
width: 400px;
height: 400px;
background-color: green;
}
所以情况基本上是这样的：如果窗口变得小于最小值，我希望有一个固定大小的div，它可以滚动。我明确希望滚动条显示在“ div中”，因此我创建了一个充当“ scrollpanel”的容器。到目前为止，一切都很好。
当您将窗口缩小到足以使滚动条显示出来，然后再次放大时，就会出现奇怪的情况。发生的情况是滚动条没有按其应有的方式隐藏（至少我认为这是合乎逻辑的）。我不知道这是错误还是功能，但我的建议是关于前者的。我对此的唯一解释是，垂直和水平滚动条可防止彼此消失。
解决方法是使用注释的javascript，如果取消注释，则滚动条将按照其预期的方式运行。
谁能更好地解释这一点？
到目前为止，我只能在Chrome中复制它。它适用于IE11和Firefox。
看起来像是bug或Chrome的特性；）通过在CSS中使用@media指令，可以在没有javaScript和额外类的情况下防止Chrome中的行为
@media screen and (min-width: 400px) {
.container {
overflow: hidden;
}
}
这样可以防止在窗口大于400px时出现滚动条。在所有（最新）浏览器上均可使用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句