如何阻止用户通过按压滚轮拖动操作触发页面滚动？

要解决按压滚轮拖动时的默认body滚动干扰问题，核心是拦截鼠标中键的拖动事件，阻止浏览器默认行为，同时触发你的自定义导航逻辑。以下是可直接复用的实现方案：

实现步骤 #

1. 跟踪鼠标中键的按压状态，避免误触发其他操作
2. 拦截中键按下事件，阻止默认的页面平移行为
3. 在拖动过程中持续阻止默认行为，并执行自定义导航逻辑
4. 鼠标松开或离开页面时重置状态

代码实现 #

// 标记是否处于中键拖动状态
let isMiddleMouseDragging = false;

// 监听鼠标按下事件，识别中键并初始化状态
document.addEventListener('mousedown', (e) => {
  // 鼠标中键的button值为1
  if (e.button === 1) {
    isMiddleMouseDragging = true;
    e.preventDefault(); // 阻止默认的中键按压行为（如页面平移）
  }
});

// 监听鼠标移动事件，处理自定义导航
document.addEventListener('mousemove', (e) => {
  if (!isMiddleMouseDragging) return;

  e.preventDefault(); // 阻止页面滚动/平移

  // 这里替换为你的自定义导航逻辑
  // 示例：根据鼠标X轴移动方向切换页面
  const moveThreshold = 8; // 触发导航的最小移动距离，避免误触
  if (e.movementX > moveThreshold) {
    // 向右拖动，执行下一页导航
    // yourNextPageHandler();
  } else if (e.movementX < -moveThreshold) {
    // 向左拖动，执行上一页导航
    // yourPrevPageHandler();
  }
});

// 监听鼠标松开事件，重置拖动状态
document.addEventListener('mouseup', () => {
  isMiddleMouseDragging = false;
});

// 鼠标离开页面时也重置状态，避免异常锁定
document.addEventListener('mouseleave', () => {
  isMiddleMouseDragging = false;
});

注意事项 #

• 部分浏览器可能对中键事件有特殊处理，测试时需覆盖主流浏览器（Chrome、Firefox、Edge）
• 调整moveThreshold值可以平衡灵敏度和误触率，根据你的导航需求自行设置
• 如果页面内有独立滚动容器，需将事件监听目标从document改为对应容器元素，避免影响其他区域的正常滚动

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