Scrollbars not hiding

I've recently stumbled upon a rather interesting behavior related to browser scrollbars. Here is the link to demonstrate this: 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;
}

So the situation is basically this: I want a fixed sized div that is scrollable if the window becomes smaller than the minimum. I explicitly want the scrollbars to appear 'in the div' so I created a container that acts as the 'scrollpanel'. So far so good.

The strangeness comes when you shrink the window small enough for the scrollbars to show up, then enlarge it again. What happens is that the scrollbars don't hide as they should (at least I think it would be logical). I don't know if it is a bug or a feature, but my tip is on the former. My only explanation to this is that the vertical and horizontal scrollbars prevent each other from disappearing.

The workaround is the commented javascript, if you uncomment it the scrollbars behave as they meant to.

Can anyone explain this better?

Update:

I can only reproduce it in Chrome so far. It works in IE11 and Firefox.

---

Looks like a bug or a peculiarity of Chrome ;) You can prevent the behavior in Chrome without javaScript and extra classes by using @media directive in your css

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

This prevents the scrollbars to appear when the window is bigger than 400px. Works on all (recent) browsers.

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

上一篇: 在彼此之上堆叠两个内部div，同时可能保持浮动

下一篇: 滚动条不隐藏