css – 防止移动设备中的水平滚动

前端之家收集整理的这篇文章主要介绍了css – 防止移动设备中的水平滚动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在顶部有一条很长的路线:
#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;
}

它工作正常,但在手机中我仍然可以无限滚动到右边.

这有什么解决方法吗?

解决方法

您应该定义宽度:100%或最大宽度:100%以防止水平滚动,因为您定义了移动设备可以占用的区域的宽度,并且由于其性质,它占用的宽度超过移动宽度本身的宽度,因此定义为100%将其限制为移动宽度.

猜你在找的CSS相关文章