如何获取组件的滚动位置？

Question

如何获取 ReactJS 组件的滚动位置（可滚动）？我想我必须向我的组件添加一个滚动事件监听器，但我被困在那里，因为我不知道如何将它添加到组件 - 只添加到窗口。我还可以通过哪个道具访问滚动位置？

Answer 1

可以通过 ref 访问滚动条。您需要确保 css 设置为overflow: scroll或overflow: auto确保您实际上获得了可滚动的内容。

class MyScroller extends React.Component {
  scroller = null
  
  componentDidMount = () => {
    if (this.scroller) {
      this.scroller.addEventListener('scroll', this.handleScroll.bind(this), false)
    }
  }
  
  componentWillUnmount = () => {
    if (this.scroller) {
      this.scroller.removeEventListener('scroll', this.handleScroll.bind(this), false)
    }
  }
  
  handleScroll = () => {
    if (this.scroller == null) return
    const { scrollHeight, scrollTop, clientHeight } = this.scroller
    const scroll = scrollHeight - scrollTop - clientHeight

    if (scroll > 0) {
      // We are not at the bottom of the scroll content
    }
    else if (scroll == 0){
      // We are at the bottom
    }
  }

  render = () => (
    <div ref={rf => this.scroller = rf} className={styles.myScrollingContainer}>
      <MyScrollingStuff />
    </div>
  )

}