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

呼！希望它能帮助一些人！

Answer 2

它为我服务的工人：

document.documentElement.offsetHeight

Answer 3

在我看来，在页面加载时找到文档的高度太难了！然而，在页面加载后找到它是一项更容易的任务。因此，尝试在"componentDidMount()“函数中找到它！您可以使用：

• document.documentElement.offsetHeight
• $(document).height()

(事实是React也有一个内置版本的jQuery，所以你可以使用第二种方法来获得高度)

例如：

import React, {Component} from 'react';

export default class YourClass extends Component {
    constructor(props){
        super(props);
        // ...
    }

    componentDidMount() {
        console.log("document-height",document.documentElement.offsetHeight);
        console.log("jQuery-document-height",$(document).height());
    }

    render(){
        // ...
    }

}