如何在鼠标滚轮滚动滑块时避免页面滚动？

核心问题是你没在滑块的滚轮事件里阻止页面默认垂直滚动行为，且原代码的事件绑定、边界判断逻辑存在问题。用overflow:hidden导致跳动，是因为滚动条消失后页面宽度变化引发布局重排。正确做法是仅当滑块还能继续滚动时，阻止页面垂直滚动；滑块滚到边界时，允许页面正常滚动。

修正后的代码： #

// 假设你已提前定义count变量
let count = 0;

// 直接给滑块容器绑定滚轮事件，统一处理逻辑
sliderWrapper.addEventListener('wheel', (e) => {
  // 每次滚轮触发时重新计算边界，避免使用初始固定值
  const sliderLeft = firstImg.getBoundingClientRect().left;
  const sliderWrapperLeft = sliderWrapper.getBoundingClientRect().left;
  const sliderRight = lastImg.getBoundingClientRect().right;
  const sliderWrapperRight = sliderWrapper.getBoundingClientRect().right;

  // 检测滚轮方向
  function detectMouseWheelDirection(e) {
    let delta = null;
    if (e.wheelDelta) {
      delta = e.wheelDelta / 60;
    } else if (e.detail) {
      delta = -e.detail / 2;
    }
    return delta > 0 ? 'up' : 'down';
  }

  const direction = detectMouseWheelDirection(e);
  let canScroll = false;

  // 处理滑块滚动，标记是否还能继续滚动
  if (direction === 'down' && sliderRight > sliderWrapperRight) {
    innerSlider.style.left = --count * 15 + '%';
    canScroll = true; // 滑块仍可向左滚动
  } else if (direction === 'up' && sliderLeft < sliderWrapperLeft) {
    innerSlider.style.left = ++count * 15 + '%';
    canScroll = true; // 滑块仍可向右滚动
  } else {
    // 滚到边界，重置滑块位置
    innerSlider.style.left = '0%';
    count = 0;
    canScroll = false;
  }

  // 仅当滑块可滚动时，阻止页面默认垂直滚动
  if (canScroll) {
    e.preventDefault();
    // 兼容Firefox，阻止事件冒泡避免冲突
    if (e.stopPropagation) e.stopPropagation();
  }
});

// 移除原代码中绑定到document的滚轮事件，避免逻辑冲突
// document.onmousewheel = null;
// if (window.removeEventListener) {
//   document.removeEventListener('DOMMouseScroll', 原事件处理函数);
// }

关键修改说明： #

• 事件绑定范围缩小：直接绑定到sliderWrapper而非document，减少全局事件影响，逻辑更聚焦。
• 实时更新边界值：每次滚轮触发时重新计算元素位置，确保边界判断是最新状态，原代码的边界值为事件绑定初始值，滚动后不会自动更新。
• 条件阻止默认行为：仅在滑块还有滚动空间时阻止页面垂直滚动，滚到边界后允许页面正常滚动，兼顾滑块功能和页面整体滚动体验。
• 清理冗余事件：移除原代码中绑定到document的滚轮事件，避免逻辑冲突。

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