我是靠谱客的博主 还单身铃铛,这篇文章主要介绍react 监听页面滚动事件,现在分享给大家,希望可以做个参考。

 componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
}
handleScroll=(event)=>{
//滚动条高度
let ctx=this;
let clientHeight = document.documentElement.clientHeight; //可视区域高度
let scrollTop
= document.documentElement.scrollTop;
//滚动条滚动高度
let scrollHeight =document.documentElement.scrollHeight; //滚动内容高度
if(scrollTop>500){
ctx.setState({ style: { display: "block", } })
}else
{
ctx.setState({ style: { display: "none", } })
}
let res=scrollHeight-scrollTop-clientHeight;
if(res<=500){
ctx.setState({ styles: { display: "none", } })
}else {
ctx.setState({ styles: { display: "block", } })
}
}

最后

以上就是还单身铃铛最近收集整理的关于react 监听页面滚动事件的全部内容,更多相关react内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(50)

评论列表共有 0 条评论

立即
投稿
返回
顶部