防止移动设备中的水平滚动 [英] Preventing horizontal scrolling in mobile devices

问题描述

我的顶部有一排很长的线:

I have a very long line at the top:

#top-line {
  background: #00A1E0;
  border-bottom: 1px solid #FFF;
  height: 4px;
  position: absolute;
  top: 0;
  left: 0;
  width: 10000px;
}

所以我正在使用overflow-x: hidden来防止水平滚动:

So I'm using overflow-x: hidden to prevent horizontal scrolling:

html {
  overflow-x: hidden;
  height: 100%;
}
body {
  background: #EDEDED;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: #666;
  height: 100%;
  overflow-x: hidden;
}

它可以正常工作，但是在手机中，我仍然可以无限期地向右滚动.

It works OK, but in mobile phones I still can scroll indefinitely to the right.

有什么解决方法吗?

推荐答案

您应该定义width:100％或max-width:100％以防止水平滚动，因为您定义了移动设备可以占据的区域的宽度，并且它的性质是它占用的宽度大于移动宽度本身的宽度，因此定义为100％会将其限制为移动宽度.

You should define the width:100% or max-width:100% to prevent horizontal scrolling because you define the width of the area mobile device can occupy and by its nature it is occupying more than the width of the mobile width itself so define as 100% which will restrict it to mobile width.

这篇关于防止移动设备中的水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！