0

a DIV with overflow-x: hidden with a child DIVcontent that equals or exceeds the parent size, as long as overflow-y is visible.
Click on the scroll area and drag to the right, It got scrolled!!!

how to avoid it to scrolled if the overflow-y is invisible?????????????

#viewport { 
  background: blue;
  overflow-y: auto;
  overflow-x: hidden;  
}

#content { 
  background: yellow;  
}
<div id="viewport" style="width: 300px; height: 200px;">   
    <div id="content" style="height: 300px; width: 300px;">
      <div style="height: 100px; width: 100px; background: orange;"></div>
    </div>
</div>

Both Firefox and IE do not scroll the content.

ddbullfrog
  • 23
  • 3
  • Just because `overflow-x` is set to `hidden` doesn't mean it cannot scroll. Have a look at: [overflow-x:hidden still can scroll](http://stackoverflow.com/questions/8635799/overflow-xhidden-still-can-scroll). – Hashem Qolami Mar 31 '15 at 03:59
  • I checked the solutions you mentioned in the link, but not works. If the vertical scrollbar shows, then the horizontal scroll bar is hidden , it still be dragable. – ddbullfrog Mar 31 '15 at 19:47

1 Answers1

0
#outer { 
    width: 150px; 
    height: 200px;
    overflow-x: hidden;
    border: 1px solid black;
}
#inner { 
    overflow: hidden;
    width: 100%;
}
ddbullfrog
  • 23
  • 3