我如何检测我是从 div 外部开始滚动并进入 div 还是在 div 内部滚动？

Question

立即发布：https://www.loom.com/share/c2567ccbd8e44ab49d1138e65ae77973

我在页面中间有一个部分或 div。在每次滚动时，我需要检测是否在从该 div 外部滚动（向上滚动或向下滚动）后进入该 div，或者我只是在该 div 内滚动？

我会解释我想要实现的目标

这是网站https://dev.plusplus.co/events/ 对于本节https://prnt.sc/25nbxzq

我想要实现的是，当我从页面顶部开始滚动时，进入上面的部分后，该部分锁定并且该 div 内有一个光滑的滑块，在该部分锁定后，我需要在上下滚动时更改幻灯片。

但是现在发生的事情尤其是在 Firefox 浏览器中，如果我从顶部滚动并输入该 div，滑块会自动更改为第二个。我需要先锁定滚动条，当我进入该部分并滚动时，只需要在下一个滚动条时将幻灯片更改为第二个

我现在正在使用的代码。

// debounce from underscore.js
function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

// use x and y mousewheel event data to navigate flickity
function slick_handle_wheel_event(e, slick_instance, slick_is_animating) {
  // do not trigger a slide change if another is being animated
  if (!slick_is_animating) {
    // pick the larger of the two delta magnitudes (x or y) to determine nav direction
    var direction =
      Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;

    console.log("wheel scroll ", e.deltaX, e.deltaY, direction);

    if (direction > 0) {
      // next slide
      slick_instance.slick("slickNext");
    } else {
      // prev slide
      slick_instance.slick("slickPrev");
    }
  }
}

// debounce the wheel event handling since trackpads can have a lot of inertia
var slick_handle_wheel_event_debounced = debounce( 
  slick_handle_wheel_event
  , 80, true
);




// slider #2
const slick_3 = $("#firstscrollsection .content-left");
slick_3.not('.slick-initialized').slick({
        dots: false,
          vertical: true,
    speed: 400,
    fade: true,
    waitForAnimate: false,
    verticalSwiping: true,
        slidesToShow: 1,
        arrows: false,
      
          infinite: false,
});
var slick_3_is_animating = false;

slick_3.on("afterChange", function(index) {
  console.log("Slide after change " + index);
  slick_3_is_animating = false;
});

slick_3.on("beforeChange", function(index) {
  console.log("Slide before change " + index);
  slick_3_is_animating = true;
});




  $("#firstscrollsection .section-wrapper-animated").on("wheel", function(e) {



      slick_handle_wheel_event_debounced(e.originalEvent, slick_3, slick_3_is_animating); 


  });

Answer 1

假设您正在尝试创建视差效果，我相信您的做法是错误的。

我也很好奇这几行代码：

// pick the larger of the two delta magnitudes (x or y) to determine nav direction
var direction = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
console.log("wheel scroll ", e.deltaX, e.deltaY, direction);

是否有理由将deltaY 与deltaX 进行比较？据我了解，您正在计算垂直轴上的滚动方向。

MDN Web Docs 概述了以下内容——也许这可能是 Firefox 问题的根源：

注意：不要将wheel 事件与scroll 事件混淆。 wheel 事件的默认操作是特定于实现的，并且不一定调度 scroll 事件。即使是这样，wheel 事件中的delta* 值也不一定反映内容的滚动方向。因此，不要依赖wheel 事件的delta* 属性来获取滚动方向。而是在scroll事件中检测目标的scrollLeft和scrollTop的值变化。

如果指针没有直接悬停在该部分上，则不会触发其wheel 事件。此外，wheel 事件不会考虑触摸或滚动条事件。在我看来，在documentElement 上监听scroll 事件是一个更好的主意。

这是我在下一个滚动条上更改幻灯片的建议。您可以检测文档的scrollTop 是否符合您的目标元素（本例中为部分）offsetTop，然后您将在导航滑块之前开始计算滚动方向。