9

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?

theintersect
  • 738
  • 2
  • 7
  • 18
  • 1
    Forgot to mention, my OS is Mac. It seems that mac is auto hiding the scroll bar as of OS Lion. To manually over right this you have to go to System Preferences -> General -> Show Scroll Bars -> Set to Always. Still thinking if there is a way to over ride this through css or javascript. – theintersect Feb 26 '13 at 19:36
  • You could have a look at ::-webkit-scrollbar in order to style the scrollbars to stop them from hiding. Just an idea, not certain it will work though. – Rob Farr Feb 26 '13 at 19:48
  • But if you don't have anything that keeps col1 height limited, it just will grow, and so it won't need the scrollbar ... Remember that setting overflow to auto means that the scrollbar isn't there if it is not needed – vals Mar 11 '13 at 19:40
  • 1
    check this question http://stackoverflow.com/questions/7855590/how-can-i-prevent-scroll-bars-from-being-hidden-for-trackpad-users-in-webkit – btevfik Mar 16 '13 at 05:30

1 Answers1

36

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

jimbishopp
  • 497
  • 4
  • 5