Vue3项目IOS端overflow-x:hidden失效，如何禁用横向滚动？

针对iOS设备上仅设置body { overflow-x: hidden; }无效的情况，可通过以下步骤彻底禁用横向滚动：

1. 全局容器样式强化 #

同时给html和body设置样式，确保根容器不会溢出：

html, body {
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

额外添加box-sizing: border-box可避免内边距或边框导致的宽度溢出。

2. 避免使用100vw引发的溢出 #

iOS设备的视口计算包含状态栏、导航栏等系统元素，使用width: 100vw容易导致元素超出实际可用宽度。替换为min-width: 100%或width: 100%：

/* 不推荐 */
.overflow-element {
  width: 100vw;
}

/* 推荐 */
.overflow-element {
  min-width: 100%;
}

3. 禁用页面缩放 #

在index.html的<head>中添加视口元标签，禁止用户缩放页面：

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

4. 拦截横向触摸事件 #

通过JavaScript监听触摸移动事件，阻止横向滚动的默认行为，同时保留纵向滚动：
在Vue项目的根组件（App.vue的mounted钩子）或入口文件中添加：

mounted() {
  document.addEventListener('touchmove', (e) => {
    const bodyWidth = document.documentElement.clientWidth;
    const touchX = e.touches[0].clientX;
    // 当触摸点超出左右边界时，阻止横向滚动
    if (touchX <= 0 || touchX >= bodyWidth) {
      e.preventDefault();
    }
  }, { passive: false });
}

注意passive: false必须设置，否则preventDefault在iOS上可能不生效。

5. 排查溢出元素 #

检查项目中绝对定位、固定定位的元素，确保它们的left/right值或宽度设置不会超出视口范围。例如：

/* 错误示例：元素右侧超出视口 */
.fixed-element {
  position: fixed;
  right: -20px;
}

/* 修正后 */
.fixed-element {
  position: fixed;
  right: 0;
  max-width: 100%;
}

内容的提问来源于stack exchange，提问作者Ori Guy