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

时间:2014-10-28 17:59:24

标签: javascript jquery scroll

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

非常感谢。

3 个答案:

答案 0 :(得分:1)

DEMO:MY 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>

答案 1 :(得分:1)

基于此: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而改变。

祝你好运!

答案 2 :(得分:1)

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