javascript - 使用溢出时如何获取scrollY的值？

Question

我有以下React 应用程序，我在其中使用 react-spring 在路线之间制作动画，并根据当前滚动位置为不同元素制作动画。

当我overflow: scroll在Home组件上使用时，我无法从我的handleScroll方法中返回任何内容（它只返回 0）：

  handleScroll(e) {
    let windowScrollPosition = window.scrollY
    this.setState({ windowScrollPosition: windowScrollPosition }, () => console.log(this.state.windowScrollPosition, 'this.state.windowScrollPosition'))
  }

有没有解决的办法？

不幸的是，我需要用它overflow: scroll来解决这个问题。

任何帮助深表感谢！

Answer 1

嗯，这是有道理的。如果您将元素设置为 100% 高度滚动，则窗口将永远不会滚动该元素。

所以你需要从元素中获取滚动位置elem.scrollTop

你可以在 React 中为元素创建一个 ref

constructor(props) {
    super(props);
    this.scrollContainer = React.createRef();
}

return (
    <div className="scroll-container" ref={this.scrollContainer}></div>
)

然后在您的句柄滚动方法中使用：

handleScroll(e) {
    let windowScrollPosition = this.scrollContainer.current.scrollTop | window.scrollY;
    this.setState({ windowScrollPosition: windowScrollPosition }, () => console.log(this.state.windowScrollPosition, 'this.state.windowScrollPosition'))
  }