1. 程式人生 > >react.js 自定義滾動事件

react.js 自定義滾動事件

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>
)