Chụp sự kiện "cuộn xuống"?

Question

Tôi đang thiết kế một trang web rất đơn giản (chỉ HTML), "tính năng" duy nhất tôi muốn thực hiện là làm điều gì đó khi người dùng cuộn xuống trang, có cách nào để nắm bắt "sự kiện" đó không?

Answer 1

Chỉ cần cho đầy đủ, có một giải pháp sử dụng một khuôn khổ JS (Mootools)

window.addEvent('scroll',function(e) { 
    //do stuff 
}); 

Answer 2

Bạn không thể làm điều đó chỉ với HTML, bạn sẽ cần phải sử dụng Javascript. Tôi khuyên bạn nên sử dụng jQuery, vì vậy giải pháp của bạn có thể trông như thế này:

$(document).ready(function() { 
    $(window).scroll(function() { 
     // do whatever you need here. 
    }); 
}); 

Nếu bạn không muốn hoặc không thể sử dụng jQuery, bạn có thể sử dụng giải pháp onscroll đăng bởi Anthony.

Answer 3

Nếu bạn không muốn sử dụng jQuery (mà bạn có thể không làm cho một trang HTML rất đơn giản), bạn có thể thực hiện điều này sử dụng thường xuyên Javascript:

<script> 
function scrollFunction() { 
    // do your stuff here; 
} 

window.onscroll = scrollFunction; 
</script> 

Bạn nói rằng bạn muốn làm điều gì đó khi họ cuộn xuống trang - sự kiện trên máy bay sẽ kích hoạt cuộn theo bất kỳ hướng nào, trong trục x hoặc trục y, do đó chức năng của bạn sẽ được gọi bất kỳ lúc nào chúng cuộn.

Nếu bạn thực sự muốn nó chỉ chạy mã của bạn khi họ cuộn xuống trang, bạn cần phải giữ nguyên vị trí cuộn trước đó để so sánh với bất kỳ khi nào cuộn được gọi.

Answer 4

Cách tốt hơn là không chỉ kiểm tra các sự kiện cuộn mà còn cho hướng di chuyển như dưới đây;

$(window).bind('mousewheel', function(event) { 
if (event.originalEvent.wheelDelta >= 0) { 
    console.log('Scroll up'); 
} 
else { 
    console.log('Scroll down'); 
} 
}); 

Answer 5

Điều này phù hợp với tôi.

var previousPosition 

$(window).scroll(function(){ 
    var currentScrollPosition=$(window).scrollTop() + $(window).height() 
    if (currentScrollPosition>previousScrollPosition) { 
    console.log('down') 
    }else if(currentScrollPosition<previousScrollPosition){ 
    console.log('up') 
    } 
    previousScrollPosition=currentScrollPosition 
});