使用window.scrollY获取元素ID的滚动位置

Question

由于转化原因，我的React应用已将overflow: hidden应用于body。这留下了无法注册scrollY的滚动位置的问题，因为滚动发生在子组件中。

如何应用window.scrollY或类似内容来注册<div id="innerContainer">的滚动位置？

以下是一个scroll addEventListener正在滚动创建课程的片段。问题是没有注册scrollY我无法添加事件。

componentDidMount () {
  window.addEventListener('scroll', this.handleHeaderStuck);
}

componentWillUnmount () {
  window.removeEventListener('scroll', this.handleHeaderStuck);
} 

或

handleHeaderStuck() {
  console.log('scrollPos', window.scrollY)
  if (window.scrollY === 0 && this.state.isStuck === true) {
      this.setState({isStuck: false});
  }
  else if (window.scrollY !== 0 && this.state.isStuck !== true) {
      this.setState({isStuck: true});
  }
}

和总体布局是......

render() {
  return (
    <main className={this.state.isStuck ? 'header-stuck' : ''}>
      <div id="container">
        <header />
        <div id="innerContainer">...</div>
        <footer />
      </div>
    </main>

更新 - 应用 Kingdaro ：

提交的答案后

使用Kingdaro提交的代码控制台的屏幕截图，该代码注册scrollPos更改但不记录实际位置

Answer 1

ref应该在这里完成工作。还要确保在卸载组件时取消注册事件侦听器，以避免内存泄漏。

class Example extends React.Component {
  innerContainer = null

  componentDidMount() {
    this.innerContainer.addEventListener("scroll", this.handleHeaderStuck)
  }

  componentWillUnmount() {
    this.innerContainer.removeEventListener("scroll", this.handleHeaderStuck)
  }

  // using a class property here so the `this` context remains properly bound
  handleHeaderStuck = () => {
    console.log('div scroll position:', this.innerContainer.scrollTop)
  }

  render() {
    return <div id="innerContainer" ref={el => (this.innerContainer = el)} />
  }
}