在 React 中获取文档的高度

Question

你如何在 React 页面加载时找到整个文档的高度？所以在 jQuery 中它看起来像：

$(document).height();

谢谢你的帮助！

Answer 1

我只是花了一些时间用 React 和滚动事件/位置来解决一些问题 - 所以对于那些仍在寻找的人，这是我发现的：

可以通过使用window.innerHeight或使用找到视口高度document.documentElement.clientHeight。（当前视口高度）

可以使用 找到整个文档（正文）的高度window.document.body.offsetHeight。

如果您试图找到文档的高度并知道何时到达底部 - 这就是我想出的：

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

（我的导航栏在固定位置是 72px，因此 -72 以获得更好的滚动事件触发器）

最后，这里有一些 console.log() 的滚动命令，它们帮助我积极地计算出我的数学。

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

哇！希望它可以帮助某人！