Avertissement - Au moment de la rédaction, j'ai été seulement cibler le navigateur google Chrome.

Lorsqu'un utilisateur fait défiler un DOM de défilement événement est déclenché, un événement qui est intégrée dans chaque navigateur par défaut. Réagir a sa propre méthode, onScroll, qui peut être appelée sur n'importe quel composant lorsque le défilement de l'événement est déclenché. L'utilisation de ce onScroll méthode, nous pouvons l'appeler une fonction en tant que résultat d'un utilisateur de défilement.

Exemple;

<SomeComponent onScroll={someMeothod} />

Comme avec n'importe quel DOM événement, d'un objet d'événement est créé avec des propriétés qui peuvent fournir des informations utiles sur l'événement et l'élément de l'événement est lié aussi. Un défilement de l'événement est déclenché pour chaque pixel de l'utilisateur fait défiler. Dans ce cas, nous sommes seuls l'identification de l'utilisateur a fait défiler jusqu'à la fin de l'élément parent contenant notre contenu.

Le calcul lorsque l'utilisateur a fait défiler jusqu'à la fin d'un conteneur

Ajouter un onScroll méthode à l'élément contenant le contenu qui appelle une fonction sur les composantes de la classe:

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

Puis créer le handleScroll fonction pour gérer l'événement 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>
    )
  }
}

Examinons ce qui se passe dans le handleScroll méthode pour rendre les choses un peu plus clair...

e - ce qui correspond à l'événement lui-même. C'est un objet qui est créé par le navigateur avec les propriétés associées à l'événement scroll, nous travaillons avec.

laissez-élément = e.cible - cela nous permet de trouver l'élément qui a envoyé l'événement à l'aide de (e.cible) et l'affecter à la variable que l'on peut utiliser dans le reste du code.

Maintenant, nous (notre code) sait à quel élément est le défilement et nous avons assigné à une variable dans nos méthodes de portée, on peut accéder aux propriétés de l'élément fourni par le navigateur et de déterminer si l'utilisateur a fait défiler jusqu'à la fin.

de l'élément.scrollHeight - c'est la hauteur, en pixels, des éléments de contenu, y compris le contenu n'est pas visible sur l'écran en raison de css overflow.

de l'élément.scrollTop - la hauteur en pixels que d'un élément de contenu défile verticalement.

de l'élément.clientHeight - la hauteur en pixels de la partie de défilement de l'élément.

En utilisant les propriétés ci-dessus, nous pouvons calculer si l'utilisateur a défiler vers le bas de l'élément en comparant la somme négative de la scrollHeight et scrollTop à la clientHeight. Si ils sont de la même, l'utilisateur dispose d'un défilement vers le bas de l'élément. En les enveloppant dans un if déclaration, nous pouvons donc vous assurer que notre fonction au sein de l'instruction si la portée n'est exécutée que lorsque l'utilisateur a fait défiler jusqu'à la fin de la div et de notre if la condition est remplie.