javascript - 使用 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)} />
  }
}