Zastrzeżenie - W chwili pisania artykułu nie koncentruje się tylko na Chrome.
Gdy użytkownik przewija zdarzenie przewijania DOM, uruchamia zdarzenie, które domyślnie wbudowane w przeglądarkę. U React ma swój własny metodę onScroll, który może być wywołana dla każdego składnika po uruchomieniu zdarzenia przewijania. Za pomocą tej metody onScroll, możemy wywołać funkcję w wyniku przewijania przez użytkownika.
Przykład;
<SomeComponent onScroll={someMeothod} />
Jak w przypadku każdego zdarzenia DOM, tworzony jest obiekt zdarzenia z właściwościami, które mogą dostarczyć użytecznych informacji o zdarzeniu, i element, z którym jest związane określone zdarzenie, również jest związana. Wydarzenie przewijania jest uruchamiany dla każdego piksela, który przewija się użytkownik. W tym przypadku interesuje nas tylko identyfikacja, gdy użytkownik прокрутил do końca nadrzędny element, który zawiera nasze treści.
Obliczenie, gdy użytkownik прокрутил do końca kontenera
Dodaj metodę onScroll do elementu zawierającego zawartość, która wywołuje funkcję w klasie składników:
<div className="content-container" onScroll={this.handleScroll}>
// Your content
</div>
Następnie utwórz funkcję handleScroll do zdarzenia przewijania:
class MyComponent extends React.Component {
handleScroll = e => {
let element = e.target
if (element.scrollHeight - element.scrollTop === element.clientHeight) {
// do something at end of scroll
}
}
render() {
return (
<div className="content-container" onScroll={this.handleScroll}>
// Your content
</div>
)
}
}
Przyjrzyjmy się, co się dzieje w metodzie handleScroll, aby robić rzeczy trochę jaśniejsze...
e - jest to zgodne z samej imprezy. Jest to obiekt stworzony przez przeglądarki z właściwościami związanymi z wydarzeniem przewijania, z którymi pracujemy.
niech element = e.target - to pozwala nam znaleźć element, który wysłał zdarzenie z pomocą (e.target), i przypisać go do zmiennej, którą możemy wykorzystać w pozostałej części kodu.
Teraz my (nasz kod) wiemy, jaki element przesuwa się, a my wyznaczono go do zmiennej w obszarze naszych metod, możemy uzyskać dostęp do właściwości tego elementu, określonej przeglądarki, i obliczyć, прокрутил czy użytkownik do końca.
element.scrollHeight - to wysokość w pikselach zawartości elementów, w tym zawartość nie jest widoczna na ekranie z powodu przepełnienia css.
element.scrollTop - wysokość w pikselach, w której zawartość elementu przewijanie w pionie.
element.clientHeight - wysokość w pikselach przewijania części elementu.
Wykorzystując powyższe właściwości, możemy obliczyć, прокрутил czy użytkownik dolną część elementu, porównując ujemną kwotę wysokości przewijania i górnej części przewijania z wysokości klienta. Jeśli są one takie same, użytkownik прокрутил stronę do dolnej części elementu. Położył się to w if operator dlatego możemy zagwarantować, że nasza funkcja w obszarze działania operatora if uruchamia się tylko wtedy, gdy użytkownik прокрутил do końca div i nasz if warunek jest spełniony.
