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>
)
react.js 自定义滚动事件
猜你喜欢
转载自blog.csdn.net/zhuchuana/article/details/84847839
今日推荐
周排行