Istnieje ponad 30 odpowiedzi na to pytanie i żadne z nich nie korzysta z niezwykle prostego, czystego rozwiązania JS, którego używałem. Nie ma potrzeby ładowania jQuery tylko po to, aby rozwiązać ten problem, ponieważ wiele innych pcha.
Aby stwierdzić, czy element znajduje się w rzutni, musimy najpierw ustalić pozycję elementów w ciele. Nie musimy tego robić rekurencyjnie, jak kiedyś myślałem. Zamiast tego możemy użyć element.getBoundingClientRect()
.
pos = elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top;
Ta wartość jest różnicą Y między górą obiektu a górą ciała.
Następnie musimy stwierdzić, czy element jest w widoku. Większość implementacji pyta, czy pełny element znajduje się w okienku ekranu, więc to omówimy.
Przede wszystkim położenie górnej części okna jest: window.scrollY
.
Możemy uzyskać dolną pozycję okna, dodając wysokość okna do jego najwyższej pozycji:
var window_bottom_position = window.scrollY + window.innerHeight;
Stwórzmy prostą funkcję do uzyskania najwyższej pozycji elementu:
function getElementWindowTop(elem){
return elem && typeof elem.getBoundingClientRect === 'function' ? elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top : 0;
}
Ta funkcja zwróci najwyższą pozycję elementu w oknie lub powróci, 0
jeśli przekażesz mu coś innego niż element z.getBoundingClientRect()
metody Ta metoda istnieje od dłuższego czasu, więc nie powinieneś się martwić, że Twoja przeglądarka jej nie obsługuje.
Teraz najwyższą pozycją naszego elementu jest:
var element_top_position = getElementWindowTop(element);
I lub dolna pozycja elementu to:
var element_bottom_position = element_top_position + element.clientHeight;
Teraz możemy ustalić, czy element znajduje się w rzutni, sprawdzając, czy dolne położenie elementu jest niższe niż górne położenie rzutni i sprawdzając, czy górne położenie elementu jest wyższe niż dolne położenie rzutni:
if(element_bottom_position >= window.scrollY
&& element_top_position <= window_bottom_position){
//element is in view
else
//element is not in view
Stamtąd możesz wykonać logikę, aby dodać lub usunąć in-view
klasę w elemencie, którą możesz później obsłużyć za pomocą efektów przejścia w CSS.
Jestem absolutnie zaskoczony, że nie znalazłem tego rozwiązania nigdzie indziej, ale wierzę, że jest to najczystsze i najbardziej skuteczne rozwiązanie i nie wymaga załadowania jQuery!