Przechwytywanie zdarzenia "przewiń w dół"?

Question

Projektuję bardzo prostą stronę WWW (tylko HTML), jedyną "cechą", którą chcę zaimplementować, jest zrobienie czegoś, gdy użytkownik przewinie stronę, czy istnieje sposób na uchwycenie tego "zdarzenia" w jakiś sposób?

Answer 1

Tylko dla kompletności, istnieje inne rozwiązanie używając innej ramy JS (MooTools)

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

Answer 2

Nie możesz tego zrobić za pomocą samego HTML, musisz użyć Javascript. Polecam używanie jQuery, dzięki czemu rozwiązanie może wyglądać następująco:

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

Jeśli nie chcą lub nie są w stanie korzystać z jQuery można użyć roztworu onscroll zamieszczonych przez Antoniego.

Answer 3

Jeśli nie chcesz używać jQuery (która nie może zrobić dla bardzo prostej strony HTML), można tego dokonać przy użyciu zwykłego Javascript:

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

window.onscroll = scrollFunction; 
</script> 

Wspomniałeś, że chcesz coś zrobić po przewinięciu strony - zdarzenie onscroll wyłącza się przewijając w dowolnym kierunku, na osi X lub Y, aby Twoja funkcja była wywoływana przy każdym przewijaniu.

Jeśli naprawdę chcesz, aby uruchamiał kod tylko podczas przewijania strony, musisz zachować poprzednią pozycję przewijania, aby porównać z każdym wywołaniem funkcji onscroll.

Answer 4

Lepszym sposobem jest nie tylko sprawdzić zdarzeń przewijania, ale także dla kierunku przewijania jak poniżej;

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

Answer 5

To działa dla mnie.

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 
});