滚动条不隐藏

Question

我最近偶然发现了一个与浏览器滚动条相关的非常有趣的行为。这是 link 来证明这一点：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，如果 window 变得小于最小值，它是可滚动的。我明确希望滚动条出现 'in the div'，因此我创建了一个充当 'scrollpanel' 的容器。到目前为止一切顺利。

当您将 window 缩小到足以显示滚动条然后再次放大时，就会出现奇怪的情况。发生的情况是滚动条没有按应有的方式隐藏（至少我认为这是合乎逻辑的）。我不知道这是错误还是功能，但我的建议是前者。我对此的唯一解释是垂直和水平滚动条相互阻止消失。

解决方法是注释 javascript，如果您取消注释，滚动条将按预期运行。

谁能更好地解释一下？

更新：

到目前为止，我只能在 Chrome 中复制它。它适用于 IE11 和 Firefox。

Answer 1

看起来像是 Chrome 的错误或特性；) 您可以通过在 css

中使用 @media 指令来防止 Chrome 中没有 javaScript 和额外类的行为

            @media screen and (min-width: 400px) {  
            .container {
                overflow: hidden;
            }
        }

这可以防止在 window 大于 400px 时出现滚动条。适用于所有（最新）浏览器。

滚动条不隐藏

Scrollbars not hiding

html

css

scrollbar

更新：