Question

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

非常感谢。

Answer 1

您需要在元素上设置唯一的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>

Answer 2

基于此：How can I determine the direction of a jQuery scroll event?

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

这将保存您的currentDiv并允许用户上下滚动

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而改变。

祝你好运！

Answer 3

你不能只使用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时进行比较。

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

3 个答案: