加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react 监听页面滚动

发布时间:2020-12-15 20:34:19 所属栏目:百科 来源:网络整理
导读:html: // 如果使用typescript, 定义dom类型 private dom: HTMLDivElement | null // ReactJS中,对Div监听只需要绑定 onScrollCapture事件 div style = {{ flex: 1 ,height: ‘10000px‘ ,overflowY: ‘scroll‘ ,overflowX: ‘hidden‘ ,}} ref ={dom = {

html:

// 如果使用typescript, 定义dom类型 
private dom: HTMLDivElement | null

// ReactJS中,对Div监听只需要绑定 onScrollCapture事件

<div
    style={{
           flex: 1,height: ‘10000px‘,overflowY: ‘scroll‘,overflowX: ‘hidden‘,}}
     ref={dom => {this.dom = dom}}
     onScrollCapture={() => this.handleOnScroll()}
    >
    。。。

 </div>

?

js:?

// 监听页面滚动

private handleOnScroll = () => {
    let flag = false
    if (this.tabdom) {
      const contentScrollTop = this.tabdom.scrollTop
      if (contentScrollTop >= 500) {
        flag = true
      }
      this.setState({
        flag
       },() => {
        // todo  根据flag 去改变样式或...
        })
    }
  }    

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读