Is it possible to prevent just horizontal scrolling when overflow-x is hidden?

javascript css overflow hidden
Andrew LeClair picture Andrew LeClair · Apr 15, 2010 · Viewed 9.3k times · Source

I have a web page that has content which extends past the right edge of the browser window. I set overflow-x: hidden on <body> to turn off the bottom scrollbar, but I can still scroll horizontally with the trackpad, which is not what I want.

Is there any way to prevent the browser from scrolling horizontally?

As a side note: Safari 4.0.4 only scrolls horizontally sometimes, and the scrolling feels "sticky" and "jumpy," whereas Firefox always smoothly scrolls horizontally.

Answer

Manuel Bitto picture Manuel Bitto · Apr 15, 2010

you could try to set in CSS:

html{
  overflow-x: hidden;
}

instead of use body selector. I tried that and works in firefox.

Related questions

css overflow hidden increases height of container

Please have a look at this fiddle - http://jsfiddle.net/Z27hC/ var container = document.createElement('span'); container.style.display = 'inline-block'; container.style.marginTop = '10px'; container.style.marginLeft = '50px'; container.style.background = 'lightblue'; document.body.appendChild(container); …

Read More
Check if an element's content is overflowing?

What's the easiest way to detect if an element has been overflowed? My use case is, I want to limit a certain content box to have a height of 300px. If the inner content is taller than that, I cut …

Read More
Bootstrap button drop-down inside responsive table not visible because of scroll

I have a problem with drop-down buttons inside tables when are responsive and scroll active because the drop-down is not visible because of overflow: auto; property. How can I fix that in order to show drop-down option of button when …

Read More