react-在onscroll方法中如何检测页面已到达底部

时间:2019-05-30 20:16:00

标签: javascript html css reactjs

我正在尝试处理 onScroll 事件,以作出反应以检测页面结尾,然后触发rest调用以获取更多详细信息。

但是,我不知道如何计算是否达到底部。

   componentDidMount() {
        this.props.fetchShows()
        window.addEventListener("scroll", this.handleScroll);
    }

    componentWillUnmount() {
        window.removeEventListener("scroll", this.handleScroll);
      }

    handleScroll = (e) => {
        console.log("handleScroll")

        const windowHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
        const body = document.body;
        const html = document.documentElement;
        const docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight,  html.scrollHeight, html.offsetHeight);
        const windowBottom = windowHeight + window.pageYOffset;

        console.log(windowBottom)
        if (windowBottom >= docHeight) {
          console.log("bottom Reached")
        } else {

        }
}

在方法handleScroll中无法访问像Window或文档对象之类的东西

如果我将任何一行放在handleScroll的开头,那么似乎没有一行被执行。

console.log("handleScroll")
console.log(document)
console.log(window)
console.log(e.target)
console.log("testing")

在上述情况下,将打印handleScroll,但此后不打印任何内容。

0 个答案:

没有答案