CSS Disabled scrolling

css vertical-scrolling
Sheff picture Sheff · Sep 7, 2011 · Viewed 237.7k times · Source

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

Abhijit Sinha picture Abhijit Sinha · Feb 14, 2012

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

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

Related questions

HTML table with 100% width, with vertical scroll inside tbody

How can I set for <table> 100% width and put only inside <tbody> vertical scroll for some height? table { width: 100%; display:block; } thead { display: inline-block; width: 100%; height: 20px; } tbody { height: 200px; display: inline-block; width: 100%; overflow: auto; } <…

Read More
How to create a scrollable Div Tag Vertically?

I want to create a scrollable div tag with a fixed height that gets a vertical scroll bar. I'm trying to get this to work in chrome. This is my CSS: #designDiv { width:249px; height:299px; background-color:Gray; overflow-y: scroll; …

Read More
iOS Safari/Chrome - Unwanted scrolling when focusing an input inside the modal

Tested in Safari and Chrome - the same result, so I think it's iOS issue. This happens only if there's an input inside the modal and I tap that input. In the same moment that input got focus and native …

Read More