javascript 防止 jQuery Mobile 上的水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11312383/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent horizontal scroll on jQuery Mobile
提问by Diogo Cardoso
Is there a way to prevent horizontal page scroll on a mobile device preferably with CSS only?
有没有办法最好只使用 CSS 来防止移动设备上的水平页面滚动？
Here's an example: http://jsfiddle.net/YfLst/15/
这是一个例子：http: //jsfiddle.net/YfLst/15/
Update:The following code solves the issue on iOS but the problem remains on Android:
更新：以下代码解决了 iOS 上的问题，但问题仍然存在于 Android 上：
html, body {
overflow-x: hidden !important;
position: relative !important;
}
回答by Beat Richartz
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
并将主体宽度设置为 100% 并溢出-x：隐藏，甚至尝试绝对定位
body {
width: 100%;
overflow-x: hidden;
position: absolute;
top: 0;
left: 0;
}
in css.
在 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">
回答by maxhud
Not with CSS, but you can make your document no wider than the screen and you won't have the issue.
不使用 CSS，但您可以使文档不超过屏幕宽度，并且不会出现问题。
Otherwise you will have to use a javascript/jquery solution like so: http://forum.jquery.com/topic/scrollview-make-page-not-scrollable
否则，您将不得不使用这样的 javascript/jquery 解决方案：http: //forum.jquery.com/topic/scrollview-make-page-not-scrollable
回答by aharris88
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:
对于 jQuery mobile，css 文件的顺序很重要。我必须做的是确保在 jQuery Mobile css 之前而不是在它之后包含我的主题 css，如下所示：
<!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:
如果您查看 jQuery Mobile 的 css，您将看到防止水平滚动的代码：
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.
您甚至不必向 body 标签添加任何类。jQuery Mobile 会自动执行此操作。
