Znaczenie $ (window) .scrollTop() == $ (document) .height() - $ (window) .height()

Question

Poniższy kod służy do wykrywania, czy użytkownik przewinął do dołu strony i to działa.

if($(window).scrollTop() == $(document).height() - $(window).height()){ 
//do something 
} 

Problem:

Nie rozumiem dlaczego odjąć wysokość okna z wysokości dokumentu, a następnie porównać go do wysokości przewijania, aby ustalić, czy dno strona została osiągnięta. Dlaczego nie jest to po prostu

if($(window).scrollTop() == $(document).height()){ 
//do something 
} 

lub

if($(window).scrollTop() == $(window).height()){ 
//do something 
} 

Answer 1

To dlatego $(window).scrollTop() zwraca pozycję na górze strony, a $(document).height() zwraca pozycję w dolnej części strony. Dlatego musisz odjąć wysokość okna, aby uzyskać porównanie z pozycją, ponieważ daje to pozycję, w której znajdowałaby się góra strony, gdybyś był w pełni przewinięty do dołu.

Answer 2

Wartość scrollTop nigdy nie będzie tak wysoka, jak wartość wysokości dokumentu. Oznaczałoby to, że przewinąłeś dokument obok, tak że wszystko znajduje się poza oknem.

Porównywanie scrollTop do wysokości okna oznacza tylko, że przewinąłeś jeden ekran w dół, a nie w dół dokumentu.

Odjęcie wysokości okna od wysokości dokumentu daje wartość, przy której będzie znajdować się scrollTop, gdy dolna część okna znajduje się na dole dokumentu.

Answer 3

$(window).scrollTop() to lokalizacja top okna względem dokumentu. Na stronie, którą właśnie patrzę, to 1385, jeśli przewijam na sam dół. $(document).height() to wysokość całej strony (1991 dla mnie). $ (window) .height() jest wysokością okna (rzutni) (606 dla mnie). Oznacza to, że położenie górnej części widoku powiększonej o wysokość okna to pozycja u dołu ekranu widoku. 1385 + 606 = 1991.