logo标签列表

防止移动设备出现水平滚动

cssmobile
3

我在顶部有一行很长的代码：

#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;
}

这个功能可以正常工作，但在手机上我仍然可以无限向右滚动。

有没有解决方法？

你应该指定html或body的width或max-width:100%。 - Heavy
不确定您试图通过那么长的行实现什么目标，但我怀疑有更好的方法。如果您不希望人们能够滚动，那么拥有这样一条长线的意义是什么？那条线是在页面顶部的图片吗？为什么它需要这么宽？您考虑过在body元素上使用背景图片吗？ - ralph.m
#top-line 上设置 width: 10000px 的原因是什么？ - Nitesh
@ralph.m 已经有一个背景图片，并且它是绝对定位的。 - alexchenco
4个回答
3

为了避免水平滚动条，您应该定义width:100%或max-width:100%，因为您定义了移动设备可以占用的区域的宽度，而其本质上占用的宽度超过了移动设备的宽度，因此定义为100%将限制其为移动设备的宽度。

2

定义页面宽度

body{
 width:320px//or 100%;
 overflow-x:hidden;
}
0

如果你来到了这里，另一件你可能想尝试的事情是调整html头部中的元标记：

<head>
    ...
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
</head>
-2
html body(tag)
ontouchmove="blockMove()"

js(document)
function blockMove() {event.preventDefault() ;}
这不仅可以防止水平滚动，还可以防止任何滚动，包括垂直滚动。 - Colin Schoen
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接