Prevent horizontal scroll on jQuery Mobile

Question

Is there a way to prevent horizontal page scroll on a mobile device preferably with CSS only?

Here's an example: http://jsfiddle.net/YfLst/15/

Update: The following code solves the issue on iOS but the problem remains on Android:

html, body {
    overflow-x: hidden !important;
    position: relative !important;
}

score 3 · Answer 1 · edited Dec 08 '15 at 23:53

3

There are different ways to do that:

You could target mobile devices with a special stylesheet

<link rel="stylesheet" media="handheld, only screen and (max-device-width: 320px)" href="phone.css">

And set the body width to 100% and overflow-x: hidden, or even try to position it absolutely

body {
  width: 100%;
  overflow-x: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

in css.

If by "preventing horizontal scrolling" you mean that your viewport (the area displayed on the mobile screen) is too narrow and should be bigger, you should set the viewport width accordingly in your meta tags

    <meta content="width = 999 (for example)" name="viewport">

edited Dec 08 '15 at 23:53

Matt Lowden

2,586
17
19

answered Jul 03 '12 at 13:55

Beat Richartz

9,474
1
33
50

The viewport is set as is: ``. I've tried `position: absolute` and `width: 100%` and the problem still remains. – Diogo Cardoso Jul 03 '12 at 14:11
What mobile device are we talking about, so may be i can reproduce the situation? – Beat Richartz Jul 03 '12 at 14:15
Another thing is: If you define width with device-width, and initial scale 1, and the page is, let's say 500px wide and the device width is 300, there is no way to prevent horizontal scrolling, because it is part of the mobile os to let the user explore the page. If your page is 500px wide and you want to prevent horizontal scrolling, you have to make sure the width of the view port is set to 500 at minimum, and the initial scale is whatever the device determines it to be. – Beat Richartz Jul 03 '12 at 14:21
I've updated the question showing that it's possible to prevent horizontal scroll on iOS but the problem still persists on Android. We're are making the tests on an iPad and Asus Transformer. – Diogo Cardoso Jul 03 '12 at 14:43
For android, this should help: http://stackoverflow.com/questions/2527899/disable-scrolling-in-webview – Beat Richartz Jul 03 '12 at 14:48
Beat Richartz, that link is for native android code, not jQuery Mobile, which is html/css/javascript. – aharris88 Feb 13 '14 at 23:10

score 0 · Answer 2 · answered Jul 03 '12 at 13:55

0

Not with CSS, but you can make your document no wider than the screen and you won't have the issue.

Otherwise you will have to use a javascript/jquery solution like so: http://forum.jquery.com/topic/scrollview-make-page-not-scrollable

answered Jul 03 '12 at 13:55

Max Hudson

9,961
14
57
107

aharris88 · Answer 3 · 2014-02-14T00:35:36.003

With jQuery mobile the order of the css files matters. What I had to do is make sure that I included my theme css before the jQuery Mobile css instead of after it like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, user-scalable=no">

    <link rel="stylesheet" type="text/css" href="css/themes/green-theme.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure.min.css" />

If you look in jQuery Mobile's css, you'll see code to prevent horizontal scrolling:

body.ui-mobile-viewport, div.ui-mobile-viewport {
    overflow-x: hidden;
}

You don't even have to add any classes to your body tag. jQuery mobile does it automatically.

Prevent horizontal scroll on jQuery Mobile

3 Answers3

Linked