CSS Overflow Auto in Mountain Lion: Scrollbars not

Question

Test this JS Fiddle in Chrome or Safari on Lion and Mountain Lion.

What should be displayed is a box that scrolls. Once you start scrolling, the bar should appear, and disappear once again when you stop scrolling. In Lion and Mountain Lion, it doesn't. Anyone know of a fix to show the scrollbars?

HTML:

<div id="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis scelerisque aliquam. Nulla consequat justo malesuada mi imperdiet sodales. Morbi rhoncus, diam nec egestas sagittis, ipsum eros sollicitudin urna, quis ornare erat nisl scelerisque eros. Nulla eleifend posuere tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in diam commodo sapien mollis cursus. Integer vitae lacus augue. Proin a velit augue. Quisque at mi augue, a sagittis metus. Aenean id bibendum nunc. Nulla quis eros odio. Sed non leo diam, et sollicitudin leo. Cras ut nibh diam, a mattis felis. Proin lectus massa, fermentum sit amet aliquet id, posuere a dui. Morbi vulputate elit elit. Proin in mi turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis scelerisque aliquam. Nulla consequat justo malesuada mi imperdiet sodales. Morbi rhoncus, diam nec egestas sagittis, ipsum eros sollicitudin urna, quis ornare erat nisl scelerisque eros. Nulla eleifend posuere tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in diam commodo sapien mollis cursus. Integer vitae lacus augue. Proin a velit augue. Quisque at mi augue, a sagittis metus. Aenean id bibendum nunc. Nulla quis eros odio. Sed non leo diam, et sollicitudin leo. Cras ut nibh diam, a mattis felis. Proin lectus massa, fermentum sit amet aliquet id, posuere a dui. Morbi vulputate elit elit. Proin in mi turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis scelerisque aliquam. Nulla consequat justo malesuada mi imperdiet sodales. Morbi rhoncus, diam nec egestas sagittis, ipsum eros sollicitudin urna, quis ornare erat nisl scelerisque eros. Nulla eleifend posuere tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in diam commodo sapien mollis cursus. Integer vitae lacus augue. Proin a velit augue. Quisque at mi augue, a sagittis metus. Aenean id bibendum nunc. Nulla quis eros odio. Sed non leo diam, et sollicitudin leo. Cras ut nibh diam, a mattis felis. Proin lectus massa, fermentum sit amet aliquet id, posuere a dui. Morbi vulputate elit elit. Proin in mi turpis.</p>
</div>​

CSS:

#box {        
    height: 300px;
    overflow: auto;
    margin: 10px;
}​

Answer 1

Here is a jQuery plugIn that does what you need.

http://naeka.github.com/jquery-scrollbar/

you'll need

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="jquery.scrollbar.min.js"></script>
<script type="text/javascript" src="demo.js"></script>

Use classes <div id="page"> <div class="scrollBox"><div id="scroll1"><p class="left">

Example: http://jsfiddle.net/pullapooh/3aGDK/

Answer 2

Seems to work for me on linux mint, how about trying:

overflow:scroll;

Answer 3

This problem is "real" in that previous posters have shown a real difference in appearance in Apple's Mountain Lion operating system.

But the scroll behavior still works, in other examples I see on the internet and on the "Test this" link of the opening post.

The problem is that the default user setup in Mountain Lion causes the scroll bars to be hidden so the user does not see them. And the default "natural" scroll wheel or track pad (Magic Pad) direction is opposite of older systems or PC's. These two aspects lead to confusion.

With the default settings, the scrolling region will scroll if the mouse arrow is over the block (even though the scroll bars are not present), and will appear if one moves in the proper direction. The default "natural" (as Apple calls it) direction is that the scroll wheel or the track pad moves the object itself in the "natural" direction (as opposed to the window moving on the object). There is a setting on the Mac to reverse this, but that will make the Mac's direction opposite of the direction on Apple's touch tablets.

The real problem is the confusion to the user caused by the hiding of the scroll bars, so they don't realize that they CAN move the area with a scroll wheel if mouse cursor is over. And furthermore the user must have a track pad or scroll wheel for it to even work, but that is needed for the most part to even navigate the Mountain Lion operating system itself.

The user can change the Mac's setting in the Personal General setting to "Show scroll bars: Always". But that is of little help to the CSS or website developer.

I suggest we complain to Apple about this. Main alternative is just not use the feature of scrollable area in a window of a website.