Passei um tempo sério tentando descobrir algumas coisas com React e rolando eventos / posições - então, para aqueles que ainda procuram, eis o que eu descobri:
A altura da janela de visualização pode ser encontrada usando window.innerHeight ou document.documentElement.clientHeight. (Altura atual da janela de visualização)
A altura do documento (corpo) inteiro pode ser encontrada usando window.document.body.offsetHeight.
Se você está tentando encontrar a altura do documento e sabe quando chegou ao fundo, eis o que eu vim:
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
});
}
}
(Minha barra de navegação tinha 72px na posição fixa, portanto -72 para obter um melhor acionador de evento de rolagem)
Por fim, aqui estão alguns comandos de rolagem para console.log (), que me ajudaram a descobrir minha matemática ativamente.
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);
Uau! Espero que ajude alguém!
.bind(this)
dos argumentos de retorno de chamada, já que ele já está vinculado pelo construtor.