在移动端，即使为只读输入框设置了 overflow-x: hidden，用户仍可通过触摸拖拽触发内容滚动；根本解决方案是结合 disabled 属性与 pointer-events: none，从交互层彻底禁用滚动能力。
在移动端，即使为只读输入框设置了 `overflow-x: hidden`，用户仍可通过触摸拖拽触发内容滚动；根本解决方案是结合 `disabled` 属性与 `pointer-events: none`，从交互层彻底禁用滚动能力。
在开发响应式表单时，常需展示长文本但禁止编辑与滚动（例如订单号、哈希值或状态标识）。仅靠 CSS 的 overflow-x: hidden 无法阻止移动端的原生滚动行为——因为该样式仅控制容器溢出裁剪，而浏览器对 <input> 元素的触摸拖拽滚动属于用户代理（UA）默认交互逻辑，不受 overflow 影响。
✅ 正确做法是「语义化禁用 + 交互屏蔽」双保险：
- 使用
disabled属性：使输入框失去焦点能力、不可选中、不响应触摸事件，同时保持视觉一致性（可通过:disabled自定义样式）； - 添加
pointer-events: none：进一步确保所有指针事件（包括touchstart/touchmove）被忽略，彻底阻断滚动触发链。
<div style="width: 200px;">
<input
disabled
style="
width: 100%;
overflow-x: hidden;
pointer-events: none;
background: #f5f5f5;
border: 1px solid #ddd;
padding: 8px;
font-family: monospace;
font-size: 14px;
"
value=" TEST TTESTEST TEST TEST TEST TEST"
/>
</div>⚠️ 注意事项：
- 避免仅用
readonly：它允许聚焦和选中文本，从而触发移动端滚动； - 不要依赖
touch-action: none单独使用：对<input>兼容性差，且无法阻止disabled状态下的底层 UA 行为； - 若需保留可复制能力（如显示 ID），可改用
<span contenteditable="false"></span>+user-select: all，但需额外处理键盘焦点与样式一致性； - 在 React 中，确保
disabled是布尔属性（非字符串），例如<input disabled>或简写<input disabled>。
总结：移动端输入框滚动的本质是“可交互元素的默认手势响应”，解决思路不是压制溢出，而是移除交互资格。disabled + pointer-events: none 是轻量、可靠、跨浏览器兼容的最佳实践。
立即学习“前端免费学习笔记（深入）”；
