在移动端，即使为 设置了 overflow-x: hidden，用户仍可通过触摸拖拽触发水平滚动；解决方法是结合 disabled 属性与 pointer-events: none，既保留视觉可读性又彻底阻止滚动交互。
在移动端，即使为 `` 设置了 `overflow-x: hidden`，用户仍可通过触摸拖拽触发水平滚动；解决方法是结合 `disabled` 属性与 `pointer-events: none`，既保留视觉可读性又彻底阻止滚动交互。
在开发响应式表单时，常需展示长文本但禁止编辑与滚动（例如订单号、交易哈希等只读字段）。仅靠 CSS 的 overflow-x: hidden 无法阻止移动端的原生滚动行为——因为浏览器会将触摸拖拽识别为“滚动容器”操作，而非文本选择或聚焦事件。
推荐解决方案：使用 disabled + pointer-events: none 组合
<div style="width: 200px;">
<input
disabled
style="pointer-events: none; background: #f9f9f9; border: 1px solid #ddd; padding: 8px;"
value=" TEST TTESTEST TEST TEST TEST TEST"
/>
</div>✅ 为什么有效？
-
disabled属性使输入框失去焦点能力与滚动响应（浏览器原生禁用交互）； -
pointer-events: none进一步确保所有指针事件（包括 touchstart/touchmove）被忽略，杜绝意外触发； - 二者结合后，输入框保持可见、可复制（多数浏览器仍支持长按复制禁用态文本），且完全不响应滚动。
⚠️ 注意事项：
- 不要仅用
readonly—— 它允许聚焦和滚动，overflow-x: hidden对其无效； - 避免仅依赖
touch-action: none：兼容性有限（iOS Safari 低版本支持差），且不能阻止已聚焦后的拖拽滚动； - 若需保留可复制能力，请确保未设置
user-select: none；如需增强可访问性，可添加aria-readonly="true"作为语义补充（但实际行为仍以disabled为准）。
总结：禁用移动端输入框滚动的关键在于移除其交互状态，而非仅隐藏溢出。disabled 是最可靠、跨平台兼容的方案，配合 pointer-events: none 可实现零风险防护。
