检查'鼠标滚轮'滚动锁定的事件方向

Check 'mousewheel' event direction with scroll locked

本文关键字：事件 方向 锁定 鼠标 检查 滚动      更新时间：2023-09-26

我目前在页面顶部有一个光滑的滑块，它应该可以在滚动时更改幻灯片，在某个点之后，它应该会恢复到正常的滚动行为。

我想做的是首先锁定滚动（是的，我知道改变滚动行为对用户体验来说是一件可怕的事情，但这是直接来自客户端的强制性请求），检查滚动事件的触发次数，检查它是向上还是向下，然后相应地切换幻灯片。

我的代码目前看起来是这样的：

$('body').on('DOMMouseScroll mousewheel', function(e) {
  var viewportHeight = $(window).height(),
      firstWaypoint = viewportHeight / 2,
      secondWaypoint = viewportHeight,
      thirdWaypoint = 3/2 * viewportHeight,
      unlockPoint = viewportHeight * 2,
      $slider = $('.home-hero__inner__text');
  if (/* Y scroll position < thirdWaypoint lock scroll */) {
    e.preventDefault();
  } else if (/* If Y scroll position < secondWaypoint show first slide */) {
    $slider.slick('slickGoTo', 0);
  } else if (/* If Y scroll position > secondWaypoint show second slide */) {
    $slider.slick('slickGoTo', 1);
  } else if (/* If Y scroll position > thirdWaypoint show third slide */) {
    $slider.slick('slickGoTo', 2);
  } else {
    // Unlock scroll
  }
});

问题是，由于我目前使用preventDefault（）锁定滚动功能，我无法再检查我的页面scrollTop（）位置，因为它总是在顶部，返回0值。

有没有办法检查正常行为下应该滚动多少像素，以及是向上还是向下？"原因我需要跟踪假设的滚动位置以触发if语句的每一步。

您可以检查wheelDelta是正还是负

$(document).on('DOMMouseScroll mousewheel', function(e) {
    var moved = e.originalEvent.wheelDelta || e.originalEvent.detail * -1 || 0;
    if (moved > 0) {
        // scrolled up
    } else if (moved < 0) {
        // scrolled down
    }
});

FIDDLE

相关文章：