发表新帖
发表新帖

Prevent horizontal scroll on jQuery Mobile

前端 未结
关注
3 1970
臣服心动
臣服心动 2021-01-22 16:28

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:<

相关标签:
3条回答
  • 暖寄归人
    2021-01-22 16:43

    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 讨论(0)
  • 情歌与酒
    2021-01-22 16:52

    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">
    0 讨论(0)
  • 没有蜡笔的小新
    2021-01-22 16:56

    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

    0 讨论(0)
 看不清?
提交回复
热议问题