Disclaimer - Al momento della scrittura mi è stato solo il targeting per il browser Chrome.

Quando un utente scorre un DOM scorrimento viene generato un evento, un evento che è costruito in mai browser di default. Reagire ha il proprio metodo, onScroll, che può essere chiamato su qualsiasi componente quando l'evento scroll è sparato. Utilizzando questo onScroll metodo siamo in grado di chiamare una funzione come risultato di un utente di scorrere.

Esempio;

<SomeComponent onScroll={someMeothod} />

Come con qualsiasi DOM evento, un evento viene creato un oggetto con proprietà che possono fornire utili informazioni circa l'evento e l'elemento di detto evento è legato troppo. Una pergamena viene generato un evento per ogni pixel di un utente scorre. In questo caso, si sono solo preoccupati di capire quando l'utente ha in corrispondenza dell'estremità dell'elemento principale che contiene i nostri contenuti.

Calcolo quando l'utente ha scorre alla fine di un contenitore

Aggiungi un onScroll metodo di elemento di contenuto che chiama una funzione di componenti di classe:

<div className="content-container" onScroll={this.handleScroll}>
  // Your content
</div>

Quindi creare il handleScroll funzione per gestire l'evento scroll:

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>
    )
  }
}

Bisogna abbattere ciò che sta accadendo nel handleScroll metodo per rendere le cose un po ' più chiaro...

e - questo corrisponde all'evento stesso. Si tratta di un oggetto che viene creato dal browser con le proprietà relative all'evento scroll a cui stiamo lavorando.

lasciate elemento = e.target - questo ci permette di trovare l'elemento che spedito l'evento utilizzando (e.di destinazione) e assegnarlo alla variabile che possiamo utilizzare nel resto del codice.

Noi (il nostro codice) sa che l'elemento di scorrimento e ci hanno assegnato una variabile nel nostro metodi di campo, possiamo accedere alle proprietà di questo elemento, dato dal browser e calcolare se l'utente dispone di scorrere fino alla fine.

elemento.scrollHeight - questa è l'altezza, in pixel, di elementi di contenuto, tra cui il contenuto non è visibile sullo schermo a causa di css overflow.

elemento.scrollTop - l'altezza in pixel di un elemento contenuto è necessario scorrere verticalmente.

elemento.clientHeight - l'altezza in pixel della parte scorrevole dell'elemento.

Utilizzando le proprietà di cui sopra, siamo in grado di calcolare se l'utente ha fatto scorrere la parte inferiore dell'elemento confrontando la somma negativa del scrollHeight e scrollTop per il clientHeight. Se sono le stesse, l'utente ha fatto scorrere la parte inferiore dell'elemento. Da questa disposizione in un if affermazione possiamo pertanto garantire che la nostra funzione all'interno dell'istruzione if ambito viene eseguito solo quando l'utente ha in corrispondenza della fine di un div e il nostro if la condizione è soddisfatta.