Chrome is auto hiding vertical scroll bar

Question

I have a problem.

Basically, I have 3 divs, one main container, and two divs, that will be half the width of the main container like so:

<div id="main">
    <div id="col1"></div>
    <div id="cold2"></div>
</div>

#col1 {
  overflow-y: auto;
  width: 48%
}
#main {
  width: 100%
}
#col2 {
  width: 48%
}

It seems that, the problem is that every time I dynamically add content to Col1, and i am expecting a scrollbar, chrome creates it, but hides it. So i have to go to the element and start scrolling via wheel in order to see it. Is there a way to over ride it?

Solution

This is a Mac setting that Chrome is obeying. Go to "System Preferences > General" and change "Show scroll bars" setting to "Always"

Comments

[Mike Mitterer]

Cool, thx. My setting was "Automatically based on input device" - I have a Mouse and a Trackpad connected so it always showed the scrollbar...

[Derek 朕會功夫]

It seems that they are now forcing the scrollbar to appear regardless of your OS settings.

[Nathan Arthur]

Telling your users to go change their OS preferences before using your website is not a solution.