如何检测“;向下滚动”;事件

How to detect a "scroll down" event

本文关键字：事件 滚动 何检测 检测      更新时间：2023-09-26

有人知道如何在javascript/jquery中检测向下滚动事件吗？

非常感谢。

基于此：如何确定jQuery滚动事件的方向？

var lastScrollTop = 0;
var currDiv = $('#firstDiv');
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       currDiv = scrollToPrevDiv();
   } else {
      currDiv = scrollToNextDiv();
   }
   lastScrollTop = st;
});

这将保存您当前的Div，并允许用户上下滚动

function scrollToNextDiv() {
   $("html").scrollTop(currDiv.next().scrollTop());
}
function scrollToPrevDiv() {
   $("html").scrollTop(currDiv.prev().scrollTop());
}

如果用户做了其他事情，比如抓取滚动条来移动页面，那么您将想要更新当前div。如果发生这种情况，你可以这样做：

function getDivLocations() {
   var scrollLocations = [];
   $('.myContentDivClass').each(function(i, div) {
      scrollLocations.push($(div).scrollTop());
   });
   return scrollLocations;
}

然后，使用这些div位置，您可以找出哪一个最接近顶部，并相应地进行更新。

很明显，我使用的选择器可能会根据您设置html的方式而改变。

祝你好运！

演示：我的FIDDLE

您需要在元素上设置唯一的Id。当元素位于屏幕的某个点时，运行滚动功能并将其设置为在下一个元素的ID处停止。尝试检测滚动：

JS:

 $(window).scroll(function() { //when window is scrolled
        var target1_top = $('#target1').offset().top;
        var window_top = $(window).scrollTop();
        var diff = target1_top - window_top;
        console.log(diff)
        if (diff < 0) {// this you need to specify; the # of pixels you need for the auto scroll to occur
            //
            $('html, body').animate({
                scrollTop: $("#target2").offset().top //scroll to this element when condition matches
            }, 2000);
        }
    });

HTML:

<body>
    <div id="target1">
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
        target1<br>
    </div>
    <div id="target2">
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
        target2<br>
    </div>
    <div id="target3">
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
        target3<br>
    </div>
</body>

您不能只使用HTML，您需要使用JQuery或JavaScript。JQuery解决方案可以是这样的：

// This code is just to detect scroll event.
$(document).ready(function() {
    $(window).scroll(function() {
       // do whatever you need here.
    });
});

如果你不想使用jQuery（对于一个非常简单的HTML页面，你可能不会这样做），你可以使用常规的Javascript：来实现这一点

<script>
// This code is just to detect scroll event.
function scrollFunction() {
    // do your stuff here;
}
window.onscroll = scrollFunction;
</script>

您提到，当他们向下滚动页面时，您想做一些事情-onscroll事件会触发在x轴或y轴的任何方向上滚动，因此在他们滚动的任何时候都会调用您的函数。

如果你真的希望它只在代码向下滚动页面时运行你的代码，你需要保留之前的滚动位置，以便在调用onscroll时与之进行比较。

相关文章：