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

Question

现在发行： https://www.loom.com/share/c2567ccbd8e44ab49d1138e65ae77973

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

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

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

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

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

我现在正在使用的代码。

// 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 文档概述了以下内容——也许这可能是 Firefox 问题的根源：

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

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

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