react.js 自定義滾動事件
阿新 • • 發佈:2019-01-08
onscroll=()=>{ let ctx = this; let clientHeight = ctx.refs.bodyBox.clientHeight; //可視區域高度 let scrollTop = ctx.refs.bodyBox.scrollTop; //滾動條滾動高度 let scrollHeight = ctx.refs.bodyBox.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", } }) } }; return( <div> <div style={{width:'600px',height:'600px',overflow: 'scroll'}} onScroll={this.onscroll} ref="bodyBox"> 滾動區域 </div> </div> )