表单自动滚动时鼠标置于textbox上无法滚轮滚动的解决方法

这个问题我做表单开发时也碰到过！核心原因是：当鼠标光标聚焦在<input type="text">、<textarea>这类表单控件上时，浏览器默认会优先让控件自身处理滚轮事件（比如文本内容超出控件高度时，滚轮会滚动控件内部的文本），不会把事件传递给页面的滚动容器。下面给你几个实用的解决方案，按需选择：

方案1：强制让页面滚动（覆盖控件原生滚动） #

如果你的textbox不需要内部滚动（比如单行输入框），可以直接阻止控件的滚轮默认行为，手动触发页面滚动：

// 选中所有需要处理的文本输入控件
const textInputs = document.querySelectorAll('input[type="text"], textarea');

textInputs.forEach(input => {
  input.addEventListener('wheel', function(e) {
    // 阻止控件自身处理滚轮事件
    e.preventDefault();
    // 让页面跟随滚轮方向滚动，behavior可选'smooth'实现平滑滚动
    window.scrollBy({
      top: e.deltaY,
      behavior: 'auto'
    });
  });
});

方案2：兼容jQuery的写法 #

如果你的项目用了jQuery，代码可以更简洁：

$('input[type="text"], textarea').on('wheel', function(e) {
  e.preventDefault();
  // 计算并设置页面滚动位置
  $('html, body').scrollTop($('html, body').scrollTop() + e.originalEvent.deltaY);
});

方案3：保留控件内部滚动的智能处理（推荐） #

如果你的textarea有大量内容需要内部滚动，可以做智能判断：只有当控件已经滚动到顶部/底部时，才让页面滚动，否则保持控件原生的滚动行为：

const scrollableTextareas = document.querySelectorAll('textarea');

scrollableTextareas.forEach(textarea => {
  textarea.addEventListener('wheel', function(e) {
    const isAtTop = this.scrollTop === 0;
    const isAtBottom = this.scrollTop + this.clientHeight >= this.scrollHeight;

    // 向上滚动且已到顶部，或向下滚动且已到底部时，触发页面滚动
    if ((e.deltaY < 0 && isAtTop) || (e.deltaY > 0 && isAtBottom)) {
      e.preventDefault();
      window.scrollBy({ top: e.deltaY });
    }
    // 其他情况让控件自己处理滚动
  });
});

框架适配提示 #

如果用Vue/React这类前端框架，思路完全一致，只是事件绑定方式不同：

• Vue：在控件上绑定@wheel.prevent="handleInputWheel"，然后在方法中实现滚动逻辑
• React：给控件添加onWheel={handleInputWheel}属性，在事件处理函数中完成判断和滚动

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