react.js 監聽頁面滾動事件
阿新 • • 發佈:2019-01-08
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", } }) } }