最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Prevent horizontal scroll on jQuery Mobile - Stack Overflow

programmeradmin6浏览0评论

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

Here's an example: /

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

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

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

Here's an example: http://jsfiddle/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;
}
Share Improve this question edited Jul 3, 2012 at 14:31 Diogo Cardoso asked Jul 3, 2012 at 13:48 Diogo CardosoDiogo Cardoso 22.3k26 gold badges102 silver badges138 bronze badges 0
Add a ment  | 

3 Answers 3

Reset to default 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">

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./topic/scrollview-make-page-not-scrollable

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.

发布评论

评论列表(0)

  1. 暂无评论