on hover scroll doesn't work for overflow:auto

Question

I have used overflow:auto in a webpage and there is a scrolling problem. When I place the cursor over the content n try to scroll the entire webpage scrolls and earlier the content alone used to scroll and now it doesn't happen. Below is the code I have used.

/* CSS Code */
 .about-style{
     max-width: 100%;
     max-height: 100%;
     background-color: #fff;
     color: #000;
     opacity: 0.7;
     width: 150px;
     height: 150px;
     overflow: auto;
     padding: 10px;
     text-align: justify;
     border-radius: 3px;
     position: relative;
     -webkit-overflow-scrolling:touch;
}

<!-- HTML Code -->

<div class="about-style">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

The behaviour is correct. If you change "overflow: auto;" temporarily to "overflow: scroll;" you will force scrollbars to appear HOWEVER those scrollbars are disabled, right? Because it doesn't make sense to have scrollbars there, there is nothing to scroll. Try playing with the width/height of the div and resizing your browser and you might start to see what's going on. — braks, May 06 '15 at 07:24
The content I have is larger than what I have placed here. This is just dummy content. The scroll bar doesn't seem to appear actually even for overflow: scroll — bachman, May 06 '15 at 07:25
Another thing to try in your test... copy paste the content like 20 times so there is heaps of it. — braks, May 06 '15 at 07:26
Does a scrollbar appear here for you? https://jsfiddle.net/9b9j00mk/ — braks, May 06 '15 at 07:26
on widows it seems to appear but on mac it doesn't. When I navigate to another page on come back to this site it appears and disappears immediately. I'm new to web development forgive me if this question seems little lame. — bachman, May 06 '15 at 07:28
See if this thread helps http://stackoverflow.com/questions/7855590/how-can-i-prevent-scroll-bars-from-being-hidden-for-os-x-trackpad-users-in-webki — braks, May 06 '15 at 07:32

score 1 · Accepted Answer · answered May 06 '15 at 07:33

Overflow only applies if your content is more than the specified width and height of the content div. as you have mentioned width: 550px; height: 450px; the content of the <div class="about-style"> is not exceeding the above mentioned specs. in this case overflow:auto and overflow:scroll does not make any difference. If at all you want a scroll to the <div class="about-style"> div reduce its height and width such that content will overflow. try with

 width: 150px;
 height: 150px;

you will get the scroll as you expect.

I'm sorry the content i have place in the question is just a dummy content but the content i have used exceeds height 500px. I have also edited the question again please check that too — bachman, May 06 '15 at 07:35

on hover scroll doesn't work for overflow:auto

1 Answers1