移动端页面左右抖动的根本原因是body或容器实际宽度超过视口，典型诱因包括100vw遇滚动条、绝对定位溢出、number输入框内边距、图片未设max-width等；应优先用开发者工具检查盒模型，html{overflow-x:hidden}才有效，需配合动态监控scrollWidth与clientWidth差值。
移动端页面左右抖动是因为body超宽了
绝大多数情况下，页面在iOS或部分Android浏览器里左右滑动、松手后回弹抖动，根本原因不是JS滚动监听没写好，而是body或某个容器实际宽度超过了视口（viewport）——哪怕只多1px，浏览器就会启用横向滚动条（即使没显示出来），导致手势行为异常。
典型诱因包括：width: 100vw遇上滚动条占位、绝对定位元素溢出、未重置的input[type="number"]默认内边距、图片未设max-width: 100%撑破容器。
- 别只盯着
overflow-x: hidden往body上加，它只是表象压制，不解决根源 - 优先用浏览器开发者工具的「检查元素」+「盒模型高亮」，把鼠标悬停在
body上，看右侧数值是否显示宽度 > 375px（以iPhone SE为例） - 临时加
outline: 1px solid red到body和直接子元素，能快速暴露谁在“偷偷变宽”
overflow-x: hidden要加在html还是body上
加在html上才真正有效。因为移动端浏览器的根滚动容器是html，不是body；给body设overflow-x: hidden对根滚动无约束力，且可能干扰iOS Safari的弹性滚动表现。
正确写法只有一行，放全局CSS最顶部：
html { overflow-x: hidden; }
-
body { overflow-x: hidden; }基本无效，尤其在iOS上 - 不要同时给
html和body都加，避免某些安卓WebView解析冲突 - 如果项目用了CSS Reset（比如Normalize.css），确认它没重置
html的overflow
为什么加了overflow-x: hidden还是抖动
常见于动态内容插入后宽度突变，比如AJAX加载富文本、第三方SDK注入广告栏、Vue/React组件挂载时计算错误的width。这时候静态CSS无法覆盖运行时溢出。
- 监听
resize事件不够，得用MutationObserver监控body子节点变动 - 简单兜底方案：在关键操作后（如
v-if切换、innerHTML赋值）主动触发一次document.documentElement.style.overflowX = 'hidden' - 慎用
scrollIntoView({ behavior: 'smooth' })，它可能强制触发布局重排，间接造成瞬时溢出
input、textarea这些表单元素特别容易引发抖动
尤其是input[type="number"]在iOS上自带左右微调按钮，会撑宽元素；textarea默认有resize，拖拽后宽度失控。它们常被忽略，却是抖动高频源头。
- 统一重置：
input, textarea { width: 100%; box-sizing: border-box; } - 禁用数字输入框的箭头：
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } - 禁止拉伸：
textarea { resize: none; }
加overflow-x: hidden不是终点，是调试起点。真正要盯住的，是每次DOM变化后document.documentElement.scrollWidth是否等于document.documentElement.clientWidth——差值不为0，抖动就还在等你。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
