如何禁用移动端只读输入框滚动？已设overflow-x:hidden仍可滚动

问题核心：overflow-x: hidden 对原生input元素的文本滚动无效，因为移动端长按触发的是浏览器内置的文本选择滚动行为，和容器的overflow属性无关。以下是几种可行的解决方法：

方案1：禁止文本选择（简单直接，适合无需复制内容的场景） #

通过CSS禁止用户选中输入框内的文本，从根源上避免长按触发滚动：

input {
  user-select: none;
  -webkit-user-select: none; /* 兼容移动端webkit内核浏览器 */
}

对应你的React代码修改：

<div style={{ width: "200px" }}>
  <input
    readOnly
    style={{
      userSelect: "none",
      WebkitUserSelect: "none"
    }}
    value=" TEST TTESTEST TEST TEST TEST TEST"
  />
</div>

方案2：用div模拟readonly输入框（保留复制功能，更灵活） #

如果需要允许用户复制内容，可将input替换为设置了contenteditable="false"的div，模拟输入框样式，同时避免原生input的滚动行为：

<div style={{ width: "200px" }}>
  <div
    style={{
      padding: "2px 4px",
      border: "1px solid #ccc",
      width: "100%",
      overflowX: "hidden",
      whiteSpace: "nowrap"
    }}
    contentEditable={false}
  >
    TEST TTESTEST TEST TEST TEST TEST
  </div>
</div>

方案3：通过JS阻止触摸滚动（精细控制，适合需要保留文本选择的场景） #

如果必须使用原生input且需要保留文本选择，可通过监听touchmove事件阻止滚动：

import { useRef, useEffect } from 'react';

function App() {
  const inputRef = useRef(null);

  useEffect(() => {
    const handleTouchMove = (e) => {
      e.preventDefault();
    };
    const input = inputRef.current;
    input.addEventListener('touchmove', handleTouchMove);
    return () => {
      input.removeEventListener('touchmove', handleTouchMove);
    };
  }, []);

  return (
    <div style={{ width: "200px" }}>
      <input
        ref={inputRef}
        readOnly
        value=" TEST TTESTEST TEST TEST TEST TEST"
      />
    </div>
  );
}

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