Question

我有以下React app，其中我使用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解决this issue。

非常感谢您的帮助！

Answer 1

那很有意义。如果将元素设置为高度为100％的滚动，则窗口将永远不会滚动该元素。

因此，您需要使用-k

从元素获取滚动位置

您可以在React中创建对该元素的引用

elem.scrollTop

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

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

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

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

1 个答案: