Disable scrolling in all mobile devices

android iphone css mobile scroll
Sammy picture Sammy · May 15, 2012 · Viewed 144.3k times · Source

This sounds like there should be a solution for it all over the internet, but I am not sure why I cannot find it. I want to disable Horizontal scrolling on mobile devices. Basically trying to achieve this:

body{
   overflow-x:hidden  // disable horizontal scrolling.
}

This may be relevant information: I also have this in my head tag, because I also do not wish the user to be able to zoom:

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />

Thanks

Answer

zeek picture zeek · Jun 24, 2014 
html, body {
  overflow-x: hidden;
}
body {
  position: relative;
}

The position relative is important, and i just stumbled about it. Could not make it work without it.

Related questions

Mobile Web - Disable long-touch/taphold text selection

I've seen/heard all about disabling text selection with the variations of user-select, but none of those are working for the problem I'm having. On Android (and I presume on iPhone), if you tap-and-hold on text, it highlights it and …

Read More
Do iPhone / Android browsers support CSS @media handheld?

I want to change my web page CSS for web browsers running on cell phones, like the iPhone and Android. I've tried something like this in the CSS file: @media handheld { body { color: red; } } But it doesn't seem to have …

Read More
@font-face not working in mobile Webkit

I'm having trouble getting @font-face to behave in any mobile Webkit browser I've tested--Safari on an iPhone 3GS, the default Android 2.2 browser, and Dolphin browser on Android. It works in all desktop browsers, from IE7 to IE9, FF3.5, Safari 4, and …

Read More