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

我的React应用程序已将

溢出：隐藏

应用于

主体

，原因是传输。这就留下了一个问题，即当滚动发生在子组件中时，无法注册

scrollY

的滚动位置

如何应用

窗口。滚动
或类似功能来注册
的滚动位置

下面是一个片段，其中一个
scroll
addEventListener
正在scroll上创建一个类。问题是没有注册
滚动
我无法添加事件

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

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

或

总平面布置图是

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

render（）{
返回(
...

更新-在应用Kingdaro提交的答案后：

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

A应该在这里完成工作。另外，请确保在组件卸载时注销事件侦听器，以避免内存泄漏

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

类示例扩展了React.Component{
innerContainer=null
componentDidMount（）{
this.innerContainer.addEventListener（“滚动”，this.handleHeaderStick）
}
组件将卸载（）{
this.innerContainer.removeEventListener（“滚动”，this.handleHeaderStick）
}
//在此处使用类属性以便“this”上下文保持正确绑定
handleHeaderStuck=（）=>{
console.log（'div scroll position:'，this.innerContainer.scrollTop）
}
render（）{
返回（this.innerContainer=el）}/>
}
}
Kingdaro，谢谢。不幸的是，虽然现在正在注册滚动位置更改，但每个都显示为0。我在上面添加了一个屏幕截图供您查看。有什么建议可以解决这个问题吗？我觉得您的解决方案就快到了。您的代码是否仍在打印
窗口。scrollY
而不是div？这将是
this.innerContainer.scrollTop
如果我没记错的话。很抱歉，我没有提到我有
console.log（'scrollPos'，window.scrollY）
添加到控制台的打印中。我在问题中附加了一个gif以更好地显示这一点。我将尝试一下您的建议。干杯。您是否打算从
div id=“innerContainer”内部将
this.innerContainer
替换为
this.innerContainer.scrollTop
？这很有道理，也很管用。谢谢您抽出时间。
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)} />
  }
}