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

Question

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

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>
  )

}

Answer 2

最简单的选项无需参考：

class MyScroller extends React.Component {

  handleScroll = (event) => {
    const { scrollHeight, scrollTop, clientHeight } = event.target;
    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 onScroll={this.handleScroll} className={styles.myScrollingContainer}>
      <MyScrollingStuff />
    </div>
  )

}

这种方法更简洁、更高效，因为脚本不需要在真实 DOM 上操作。

Answer 3

你必须在你的 div、span 等上使用 onScroll 函数

<TableContainer className={classes.container} onScroll={handleScroll}>

handleScroll 是这个函数，如果滚动位置向下则请求你的数据库

const handleScroll = async event => {
    const { scrollHeight, scrollTop, clientHeight } = event.target
    const scrollPosition = scrollHeight - scrollTop - clientHeight
    if (scrollPosition <= 0) {
      onRequest()
    }
  }

方法 2，您可以使用 useRef 到您的组件

class ScrollAwareDiv extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = React.createRef()
    this.state = {scrollTop: 0}
  }
  
  onScroll = () => {
    const scrollY = window.scrollY //Don't get confused by what's scrolling - It's not the window
    const scrollTop = this.myRef.current.scrollTop
    console.log(`onScroll, window.scrollY: ${scrollY} myRef.scrollTop: ${scrollTop}`)
    this.setState({
      scrollTop: scrollTop
    })
  }

  render() {
    const {
      scrollTop
    } = this.state
    return (
      <div
        ref={this.myRef}
        onScroll={this.onScroll}
         >
        <p>This demonstrates how to get the scrollTop position within a scrollable react component.</p>
        <p>ScrollTop is {scrollTop}</p>
        <p>This demonstrates how to get the scrollTop position within a scrollable react component.</p>
        <p>ScrollTop is {scrollTop}</p>
        <p>This demonstrates how to get the scrollTop position within a scrollable react component.</p>
        <p>ScrollTop is {scrollTop}</p>
        <p>This demonstrates how to get the scrollTop position within a scrollable react component.</p>
        <p>ScrollTop is {scrollTop}</p>
        <p>This demonstrates how to get the scrollTop position within a scrollable react component.</p>
        <p>ScrollTop is {scrollTop}</p>
        <p>This demonstrates how to get the scrollTop position within a scrollable react component.</p>
        <p>ScrollTop is {scrollTop}</p>
      </div>
    )
  }
}

ReactDOM.render(
  <ScrollAwareDiv />,
  document.getElementById('root')
);