移动端如何强制将所有滚动事件作用于全屏textarea？

嘿，这个问题我在开发移动端PWA时也碰到过好几次——浏览器的触摸滚动逻辑有时候确实会“抽风”，误把textarea的滚动当成页面滚动触发橡皮筋效果。不过别担心，有几个经过验证的方案能帮你把所有滚动事件牢牢绑定在textarea上：

1. 确保textarea始终获得焦点 #

浏览器的触摸滚动优先级有时候会和元素焦点挂钩，如果textarea没聚焦，触摸操作很容易“跑偏”到页面上。你可以通过自动聚焦+触摸事件强制聚焦来解决：

// 页面加载完成后自动聚焦textarea
document.addEventListener('DOMContentLoaded', () => {
  const editorTextarea = document.querySelector('textarea');
  editorTextarea.focus();
});

// 监听触摸开始事件，确保滚动前textarea已聚焦
const editorTextarea = document.querySelector('textarea');
editorTextarea.addEventListener('touchstart', () => {
  if (document.activeElement !== editorTextarea) {
    editorTextarea.focus();
  }
}, { passive: true });

2. 用CSS指定textarea的触摸行为 #

给textarea添加touch-action: pan-y属性，直接告诉浏览器：这个元素只处理垂直滚动操作，别把事件分流到页面上。这是从浏览器底层逻辑层面约束滚动行为：

textarea {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  touch-action: pan-y; /* 关键：限制触摸行为仅垂直滚动 */
  border: none;
  outline: none; /* 可选：去掉默认焦点边框，优化视觉 */
}

3. 拦截页面级的默认滚动行为 #

通过监听页面的touchmove事件，阻止页面本身的滚动默认行为，只允许textarea处理滚动。这里要注意把事件监听的passive设为false，才能正常调用preventDefault：

document.body.addEventListener('touchmove', (e) => {
  const editorTextarea = document.querySelector('textarea');
  // 仅当触摸目标与textarea无关时，阻止页面滚动，确保所有滚动事件流向textarea
  if (!editorTextarea.contains(e.target) && document.activeElement !== editorTextarea) {
    e.preventDefault();
  }
}, { passive: false });

4. 阻止滚动事件冒泡（辅助优化） #

有时候textarea的scroll事件会冒泡到页面，虽然不直接导致问题，但可以主动阻止冒泡，避免浏览器误判：

const editorTextarea = document.querySelector('textarea');
editorTextarea.addEventListener('scroll', (e) => {
  e.stopPropagation();
}, { passive: true });

为什么会出现这个问题？ #

移动端浏览器为了优化触摸体验，会对滚动边界（比如元素滚到顶/底部）触发页面的橡皮筋回弹效果，但偶尔会出现事件目标识别错误——比如textarea刚加载完成、焦点意外丢失时，浏览器会把触摸滚动判定为页面操作。上面的方案从焦点控制、浏览器行为约束、事件拦截三个维度彻底解决这个问题，基本能覆盖所有极端情况。

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