react 监听页面滚动

最新推荐文章于 2025-07-10 15:35:12 发布

转载最新推荐文章于 2025-07-10 15:35:12 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/aloehui/p/10402844.html

文章标签：

#javascript #ViewUI

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 去改变样式或...
        })
    }
  }