Question

我最近偶然发现了与浏览器滚动条相关的一个相当有趣的行为。以下是演示此内容的链接：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'的容器。到目前为止一切都很好。

当您将窗口缩小到足以让滚动条显示出来然后再将其放大时，会出现陌生感。会发生什么是滚动条不会隐藏它们（至少我认为它是合乎逻辑的）。我不知道这是一个bug还是一个功能，但我的提示是前者。我唯一的解释是垂直和水平滚动条可以防止彼此消失。

解决方法是评论的javascript，如果您取消注释它，滚动条的行为与它们的意图相同。

任何人都可以更好地解释这个吗？

更新

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

Answer 1

看起来像Chrome的错误或特性;）您可以在css

中使用@media指令，在没有javaScript和额外类的情况下阻止Chrome中的行为

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

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

滚动条没有隐藏

更新

1 个答案: