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

问：

我开发了一个多图像滑块，可以用鼠标滚轮水平滚动。问题是，当我用鼠标滚轮在页面上向下滚动并到达滑块时，尽管滑块开始从右向左移动，但页面继续向下滚动。我想防止页面表单进一步滚动。当鼠标悬停在滑块上时，我试图将“溢出：隐藏”放在身体上，但随后滑块由于滚动消失并重新出现而跳跃。有没有人知道我该如何解决这个问题？先谢谢你。

  sliderWrapper.addEventListener('wheel', () => {
           
    let sliderLeft = firstImg.getBoundingClientRect().left;
    let sliderWrapperLeft =  sliderWrapper.getBoundingClientRect().left;

    let sliderRight = lastImg.getBoundingClientRect().right;
    let sliderWrapperRight =  sliderWrapper.getBoundingClientRect().right;

    function detectMouseWheelDirection(e) {
      var delta = null,
        direction = false;
      if (!e) {
        // if the event is not provided, we get it from the window object
        e = window.event;
      }
      if (e.wheelDelta) {
        // will work in most cases
        delta = e.wheelDelta / 60;
      } else if (e.detail) {
        // fallback for Firefox
        delta = -e.detail / 2;
      }
      if (delta !== null) {
        direction = delta > 0 ? 'up' : 'down';
      }

      return direction;
    }

    function handleMouseWheelDirection(direction) {
      // if mousewheel direction is down, move the slider to the left
        
       if (direction == 'down' && sliderRight > sliderWrapperRight) {
        innerSlider.style.left = --count * 15 + '%';
        // if mousewheel direction is up, move the slider to the right
      } else if (direction == 'up' && sliderLeft <= sliderWrapperLeft) {
        innerSlider.style.left = ++count * 15 + '%';
      } else {
        innerSlider.style.left = 0 + '%';
        count = 0;
      }
            
    }

   document.onmousewheel = function (e) {
      if (isMouseHover) {
          handleMouseWheelDirection(detectMouseWheelDirection(e));
      }
    };

    if (window.addEventListener) {
    document.addEventListener('DOMMouseScroll', function (e) {
        handleMouseWheelDirection(detectMouseWheelDirection(e));
      });
    }
  });