CSS Disabled scrolling

Question

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.

Answer 1

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

body, html { 
    overflow-x: hidden; 
    overflow-y: auto;
}

Answer 2

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

Answer 3

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