如何通过CSS禁用iOS端网站的横向滚动

针对iPhone上横向滚动无法禁用的问题，给出以下针对性解决方案：

1. 配置正确的Viewport元标签 #

iOS设备对视口设置高度敏感，必须添加精准的meta标签锁定视口，避免缩放触发横向滚动：

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

• width=device-width：让视口宽度匹配设备屏幕宽度
• initial-scale=1.0：设置初始缩放比例为1
• maximum-scale=1.0 + user-scalable=no：禁止用户手动缩放，从根源避免缩放导致的横向滚动

2. 修复页面内溢出的子元素 #

多数情况下，横向滚动并非html/body本身的问题，而是页面内某个子元素宽度超出容器范围。可通过以下方式排查解决：

• 全局设置盒模型，避免内边距、边框撑宽元素：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

• 临时给所有容器添加横向溢出隐藏（用于快速定位问题元素，找到后再针对性调整）：

* {
  overflow-x: hidden;
}

• 使用Safari开发者工具连接iPhone，检查哪个元素的offsetWidth超过屏幕宽度，将其宽度设置改为max-width: 100%，避免硬编码固定宽度

3. 通过JS拦截iOS触摸横向滚动 #

iOS触摸滚动有默认行为，单纯CSS可能无法完全拦截，可通过监听触摸事件阻止横向滑动：

let startX;

document.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
});

document.addEventListener('touchmove', (e) => {
  const moveX = e.touches[0].clientX;
  const diffX = Math.abs(moveX - startX);
  // 仅阻止横向滑动，保留纵向滚动功能
  if (diffX > 5) {
    e.preventDefault();
  }
}, { passive: false });

• 必须设置{ passive: false }，否则iOS环境中preventDefault会失效

4. 优化原有CSS配置 #

调整你的CSS代码，确保html和body的宽度、溢出设置逻辑正确：

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  /* 若需要保留纵向滚动，不要添加overflow: hidden */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

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