我正在尝试处理 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
,但此后不打印任何内容。