我在顶部有一条很长的线：
#top-line {
background: #00A1E0;
border-bottom: 1px solid #FFF;
height: 4px;
position: absolute;
top: 0;
left: 0;
width: 10000px;
}
所以我overflow-x: hidden用来防止水平滚动：
html {
overflow-x: hidden;
height: 100%;
}
body {
background: #EDEDED;
font-size: 12px;
font-family: Arial, sans-serif;
color: #666;
height: 100%;
overflow-x: hidden;
}
它工作正常，但在手机中我仍然可以无限期地向右滚动。
有什么解决方法吗？
您应该定义 width:100% 或 max-width:100% 以防止水平滚动，因为您定义了移动设备可以占用的区域的宽度，并且就其性质而言，它占用的宽度超过了移动设备宽度本身的宽度，因此定义为100% 将其限制为移动宽度。
定义体宽
body{
width:320px//or 100%;
overflow-x:hidden;
}
如果您最终来到这里，您可能想尝试的另一件事是在 html 头中调整此元标记：
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
</head>
html body(tag)
ontouchmove="blockMove()"
js(document)
function blockMove() {event.preventDefault() ;}