1. 程式人生 > >react.js 監聽頁面滾動事件

react.js 監聽頁面滾動事件

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

}