Disclaimer - La momentul de scris am fost vizând doar browser-ul Chrome.
Atunci când un utilizator derulează un DOM scroll eveniment este concediat, un eveniment care este construit vreodată în browser-ul implicit. React are propria metoda, onScroll, care poate fi apelat de pe orice componentă atunci când alegeți eveniment este concediat. Folosind acest onScroll metoda putem apela o funcție, ca urmare a unui utilizator de defilare.
Exemplu;
<SomeComponent onScroll={someMeothod} />
Ca cu orice DOM eveniment, un eveniment de obiect este creat cu proprietăți care pot oferi informații utile despre eveniment și elementul spus eveniment este legat de asemenea. Un eveniment de parcurgere este concediat pentru fiecare pixel o suluri de utilizare. În acest caz, suntem în cauză numai cu identificarea atunci când utilizatorul a derulat la sfârșitul elementului părinte conține un conținut nostru.
Calcul atunci când utilizatorul a derulat la sfârșitul unui container
Adauga un onScroll metoda cu element care conțin conținut care solicită o funcție pe componente de clasă:
<div className="content-container" onScroll={this.handleScroll}>
// Your content
</div>
Apoi a crea handleScroll funcția să se ocupe de eveniment de parcurgere:
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>
)
}
}
Hai să vedem ce se întâmplă în handleScroll metoda pentru a face lucrurile un pic mai clar...
e - aceasta corespunde la evenimentul în sine. Este un obiect care este creat de către browser cu proprietăți legate de eveniment de parcurgere cu care lucrăm.
lasa element = e.target - acest lucru ne permite de a găsi elementul care expediază eveniment folosind (e.țintă) și atribuiți-l la variabila pe care o putem folosi în restul codului.
Acum am (codul nostru) știe care element este de a fi defilat și ne-am fi dat la o variabilă în metodele noastre de aplicare, putem accesa proprietățile acelui element dat de browser-ul și se calculează dacă utilizatorul a derulat la sfârșitul.
element.scrollHeight - aceasta este înălțimea în pixeli a elementelor de conținut, inclusiv conținutul nu este vizibil pe ecran din cauza css preaplin.
element.scrollTop - înălțimea în pixeli ca un element de conținut este defilat pe verticală.
element.clientHeight - înălțimea în pixeli a derulabil parte a elementului.
Folosind proprietățile de mai sus, putem calcula dacă utilizatorul a derulat la partea de jos a elementului prin compararea cu sumă negativă de scrollHeight și scrollTop la clientHeight. Dacă sunt la fel, utilizatorul a derulat la partea de jos a elementului. De ambalaj acest lucru într-un if declarație prin urmare, putem garanta că funcția noastră în cazul în care declarația de aplicare se execută numai atunci când utilizatorul a derulat la sfârșitul div și if condiție este îndeplinită.
