使用溢出时如何获取scrollY的值？答案

【问题标题】：How to get the value of scrollY while using overflow?使用溢出时如何获取scrollY的值？
【发布时间】：2019-02-07 00:36:06
【问题描述】：

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

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

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

有没有办法解决这个问题？

不幸的是，我需要使用overflow: scroll 来解决this issue。

非常感谢任何帮助！

【问题讨论】：

标签： javascript reactjs scroll overflow react-spring

【解决方案1】：

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

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

你可以在 React 中创建一个元素的引用

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

【讨论】：