react 監聽頁面滾動

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.dom) {
      const contentScrollTop = this.dom.scrollTop
      if (contentScrollTop >= 500) {
        flag = true
      }
      this.setState({
        flag
       }, () => {
        // todo  根據flag 去改變樣式或...
        })
    }
  }