32

I came across an issue with one of our web sites:

In IE9 the page had a vertical scrollbar, but you couldn't use the mousewheel, arrow keys, pgup/pgdwn to scroll. The only way to scroll was to actually click/hold and move the scrollbar.

I removed the following from the css:

{
    overflow-x: hidden;
}

Then scrolling worked as usual. Has anyone else come across this? It seems odd as overflow-x should hide the horizontal scroll bar? Why would it effect the vertical?

I have tried this on a test page and it acts as expected. So it must be a combination of things.

DIF
  • 2,470
  • 6
  • 35
  • 49
Sheff
  • 421
  • 1
  • 5
  • 6
  • 1
    `"*I have tried this on a test page and it acts as expected. So it must be a combination of things."` - unless someone has come across this before, we *need* a test page that reproduces the problem. You can either post a link to the site, or take a copy of the page yourself and anonymise it and have all the required CSS (and any JavaScript *relevant to the problem*) included and post it on [JS Bin](http://jsbin.com/). – thirtydot Sep 07 '11 at 14:29
  • Apologies, I don't have permission to post a link to the materials themselves (they are subscription only). This was mainly out of interest, as I have managed to fix the issue, its just I don't understand why the fix worked. Unfortunately I can't simply upload a page as it is part of an e-learning system. – Sheff Sep 07 '11 at 14:35

3 Answers3

47

Try using the following code snippet. This should solve your issue.

body, html { 
    overflow-x: hidden; 
    overflow-y: auto;
}
jnthnjns
  • 8,962
  • 4
  • 42
  • 65
Abhijit Sinha
  • 471
  • 4
  • 3
18

overflow-x: hidden;
would hide any thing on the x-axis that goes outside of the element, so there would be no need for the horizontal scrollbar and it get removed.

overflow-y: hidden;
would hide any thing on the y-axis that goes outside of the element, so there would be no need for the vertical scrollbar and it get removed.

overflow: hidden;
would remove both scrollbars

DIF
  • 2,470
  • 6
  • 35
  • 49
Martin
  • 1,216
  • 8
  • 15
4

I use iFrame to insert the content from another page and CSS mentioned above is NOT working as expected. I have to use the parameter scrolling="no" even if I use HTML 5 Doctype

Roman
  • 41
  • 1