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

我怎样才能得到ReactJS组件的滚动位置——它是可滚动的？我想我必须在我的组件中添加一个滚动事件监听器，但我被困在那个里了，因为我不知道如何将它添加到组件中——只添加到窗口中。还有，我可以通过哪个道具访问滚动位置？

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

类MyScroller扩展了React.Component{ scroller=null componentDidMount==>{ 如果这是滚动条{ this.scroller.addEventListener'scroll'，this.handleScroll.bindthis，false } } 组件将卸载==>{ 如果这是滚动条{ this.scroller.removeEventListener'scroll'，this.handleScroll.bindthis，false } } handleScroll==>{ 如果this.scroller==null，则返回 const{scrollHeight，scrollTop，clientHeight}=this.scroller const scroll=scrollHeight-scrollTop-clientHeight 如果滚动>0{ //我们不在滚动内容的底部 } 如果滚动==0，则为else{ //我们在底部 } } 渲染==> this.scroller=rf}className={styles.myScrollingContainer}>

---

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

类MyScroller扩展了React.Component{ scroller=null componentDidMount==>{ 如果这是滚动条{ this.scroller.addEventListener'scroll'，this.handleScroll.bindthis，false } } 组件将卸载==>{ 如果这是滚动条{ this.scroller.removeEventListener'scroll'，this.handleScroll.bindthis，false } } handleScroll==>{ 如果this.scroller==null，则返回 const{scrollHeight，scrollTop，clientHeight}=this.scroller const scroll=scrollHeight-scrollTop-clientHeight 如果滚动>0{ //我们不在滚动内容的底部 } 如果滚动==0，则为else{ //我们在底部 } } 渲染==> this.scroller=rf}className={styles.myScrollingContainer}> } 无需参考的最简单选项：

由于脚本不需要在真实的DOM上操作，因此这种方法更干净、更高效。

最简单的选项是无需参考：

---

由于脚本不需要在真实的DOM上操作，这种方法更干净、更高效。

我使用的是react钩子，所以我想我需要使用我的ref作为useRef？我试过了，但它给了我一个错误，说我不能将eventListener添加到ref。下面是一个使用react钩子的示例。我使用react钩子，所以我想我需要使用我的ref作为useRef？我试过了，它给了我一个错误，说我不能将eventListener添加到ref。下面是一个使用react钩子的示例。

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

}