Question

有没有办法阻止移动设备上的水平页面滚动，最好只使用CSS？

更新：以下代码解决了iOS上的问题，但问题依然存在于Android上：

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

Answer 1

有不同的方法可以做到这一点：

您可以使用特殊样式表

定位移动设备

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

将身体宽度设置为100％并将overflow-x：hidden设置为隐藏，或者甚至尝试将其置于绝对位置

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

在css。

如果通过“防止水平滚动”意味着您的视口（移动屏幕上显示的区域）太窄而且应该更大，则应在元标记中相应地设置视口宽度

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

Answer 2

不使用CSS，但是您可以使文档不比屏幕宽，并且您不会遇到问题。

否则你将不得不使用像这样的javascript / jquery解决方案：http://forum.jquery.com/topic/scrollview-make-page-not-scrollable

Answer 3

使用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" />

如果你查看jQuery Mobile的css，你会看到防止水平滚动的代码：

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

您甚至不需要在body标签中添加任何类。 jQuery mobile自动完成它。

防止jQuery Mobile上的水平滚动

3 个答案: