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

在我看来，在页面加载时找到文档的高度太棘手了！但是，在页面加载后找到它是一件更容易的任务。因此，尝试在“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(){
        // ...
    }

}

Answer 3

对我来说它的工人：

document.documentElement.offsetHeight

Answer 4

要在React中使用$(document).height()，您需要导入

在React中获取文档的高度

4 个答案: