2021年移动端overflow-x属性设置不生效问题咨询

原有方案失效的核心原因：移动端浏览器的视口渲染逻辑与桌面端存在差异，仅给html、body设置overflow-x: hidden无法拦截子元素溢出带来的横向滚动，部分安卓、iOS浏览器还会主动忽略body上的overflow属性。 #

分步解决方案 #

• 第一步：补全viewport元标签 #

  大部分横向滚动问题都是因为未正确设置视口导致，页面实际渲染宽度大于设备屏幕宽度，在HTML的head中加入如下代码：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  

• 第二步：升级溢出限制规则 #

  不要仅给html、body加属性，同时给页面最外层包裹容器加限制：

  html, body {
    overflow-x: hidden;
    position: relative;
    width: 100%;
  }
  /* 此处的.wrapper替换为你页面的最外层容器类名/ID，比如#app */
  .wrapper {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }
  /* 全局设置盒模型，避免padding撑宽元素导致溢出 */
  * {
    box-sizing: border-box;
  }
  

• 第三步：排查溢出元素 #

  如果上面两步做完还有横向滚动，说明存在子元素宽度超出视口：
  • 避免给元素设置大于360px的固定宽度，需搭配媒体查询做移动端适配
  • 不要同时给宽度为100vw的元素加左右margin/padding，100vw包含浏览器滚动条宽度，加边距必然溢出，替换为width: 100%即可
  • 排查使用了绝对定位、负margin的元素，确认没有left/right属性导致元素偏移出视口范围

• 第四步：兜底拦截方案 #

  如果实在定位不到溢出元素，可通过JS事件直接拦截横向滚动行为：

  document.addEventListener('touchmove', function(e) {
    // 多指触摸直接拦截
    if (e.touches.length > 1) return e.preventDefault();
    // 横向滑动偏移量大于10且页面已经滚动到最左侧时拦截
    const offsetX = e.changedTouches[0].clientX - e.touches[0].clientX;
    const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
    if (scrollLeft <= 0 && offsetX > 10) e.preventDefault();
  }, { passive: false });
  

  注意必须将passive设为false，否则部分高版本浏览器会默认禁止touch事件中调用preventDefault。

内容的提问来源于stack exchange，提问作者Bernardo Olisan