滚动条不隐藏

我最近偶然发现了一个与浏览器滚动条相关的非常有趣的行为。 这里是链接来演示这个：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。

---

看起来像Chrome的一个bug或特性;）您可以通过在css中使用@media指令来防止Chrome中没有javaScript和额外类的行为

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

这可以防止窗口大于400像素时出现滚动条。 适用于所有（最近）的浏览器。

链接地址: http://www.djcxy.com/p/88417.html

上一篇: Scrollbars not hiding

下一篇: Div growing outside of width constraint despite overflow:auto