Je viens de passer un peu de temps sérieux à comprendre certaines choses avec React et à faire défiler les événements / positions - donc pour ceux qui cherchent encore, voici ce que j'ai trouvé:
La hauteur de la fenêtre peut être trouvée à l'aide de window.innerHeight ou à l'aide de document.documentElement.clientHeight. (Hauteur actuelle de la fenêtre)
La hauteur du document entier (corps) peut être trouvée à l'aide de window.document.body.offsetHeight.
Si vous essayez de trouver la hauteur du document et de savoir quand vous avez touché le bas, voici ce que j'ai trouvé:
if (window.pageYOffset >= this.myRefII.current.clientHeight && Math.round((document.documentElement.scrollTop + window.innerHeight)) < document.documentElement.scrollHeight - 72) {
this.setState({
trueOrNot: true
});
} else {
this.setState({
trueOrNot: false
});
}
}
(Ma barre de navigation était 72px en position fixe, donc le -72 pour obtenir un meilleur déclencheur d'événement de défilement)
Enfin, voici un certain nombre de commandes de défilement vers console.log (), qui m'ont aidé à comprendre activement mes mathématiques.
console.log('window inner height: ', window.innerHeight);
console.log('document Element client hieght: ', document.documentElement.clientHeight);
console.log('document Element scroll hieght: ', document.documentElement.scrollHeight);
console.log('document Element offset height: ', document.documentElement.offsetHeight);
console.log('document element scrolltop: ', document.documentElement.scrollTop);
console.log('window page Y Offset: ', window.pageYOffset);
console.log('window document body offsetheight: ', window.document.body.offsetHeight);
Ouf! J'espère que cela aide quelqu'un!
.bind(this)
des arguments de rappel car il est déjà lié par le constructeur.