react 监听页面滚动事件

夏天的一朵云

于 2020-09-19 09:20:41 发布

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js html页面文章标签： html js

本文链接：https://blog.csdn.net/ximenxiafeng/article/details/108676775

js 同时被 2 个专栏收录

24 篇文章

订阅专栏

html页面

23 篇文章

订阅专栏

 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", } })
        }
 
}