Wykryj martwe przewijanie u dołu strony (kółko myszy, zdarzenia przewijania)

Question

Chcę wykryć, kiedy użytkownik przewinął na dół strony, a następnie próbuje kontynuować przewijanie, ale tam, gdzie nie ma już nic do przewinięcia/wyświetlenia .

Tworzę metryki użyteczności, w których martwe przewijanie jest jedną miarą i potrzebuję sposobu, aby dokładnie wykryć, kiedy użytkownicy próbują przewijać, ale nie ma nic do zaoferowania.

Potrzebuję czegoś, co zostanie wywołane, gdy rozpocznie się zdarzenie kółka myszy, ale strona nie będzie się przewijać, z kierunkiem góra/dół.

Answer 1

Oto wywierają ze skryptu używam zatrzymać stronę z animowania zwój po osiągnięciu dna:

var gate = $(window), edge; 
setLength(); 

gate.resize(function() { 
    setLength(); 
}); 

function setLength() { 
    edge = $(document).height()-gate.height(); 
} 

gate.mousewheel(function(event, delta) { 

    outset = gate.scrollTop(); 
    if (delta == 1 && outset == 0) console.log('top'); 
    if (delta == -1 && outset == edge) console.log('bottom'); 
}); 

używam pluginu kółka myszy , jest po prostu świetny i dla każdej dobrej obsługi przeglądarki krzyżowej trzeba napisać kilka kodów, aby normalizować zdarzenia na kołach i tak ...

https://plugins.jquery.com/mousewheel/

Domyślam się, że zrobi to, co zostało zadane w pytaniu - sprawdź, czy zdarzenie kółka myszy sprawi, że strona przewinie się poza jej granice. W eksperymencie myślowym możesz również być o krok przed tym, ale tylko dokładnie, jeśli mousewheel jest używany jako seter. Można wykonać tę stronę, aby przewinąć dokładną liczbę pikseli, gdy użytkownik uruchomi zdarzenie typu mouswheel. A kiedy miejsce docelowe strony jest znane, możesz sprawdzić, czy jest ona w zasięgu górnej i dolnej części strony.

Answer 2

Dodaj Windows scrollTop() i wysokość. Jeśli jest równa wysokości dokumentów, jesteś na dole strony.

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() == $(document).height()) { 
     console.log("Page bottom reached!"); 
    } 
}); 

http://jsfiddle.net/1v3cakn9/1/