Как получить значение scrollY при использовании переполнения?

Question

У меня есть следующее приложение React, в котором я использую реагирующую пружину для анимации между маршрутами и анимации различных элементов на основе текущей позиции прокрутки.

Когда я использую 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

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