Как получить значение 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'))
  }