Определение направления прокрутки на странице - обновление предыдущего значения

Question

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

Вот мой код:

componentDidMount(){
    const prev = window.scrollY;
    window.addEventListener('scroll', e => this.handleNavigation(e, prev);
}

Видимая проблема здесь в том, что componentDidMount срабатывает только один раз , поэтому, когда я пытаюсь сделать следующее:

handleNavigation = (e, prev) =>{
    const window = e.currentTarget;

    if(prev > window.scrollY){
        console.log("scrolling up");
    }
    else if(prev < window.scrollY){
        console.log("scrolling down");
    }
};

Он правильно сравнивает значения, но prev никогда не меняется , поэтому он не работает должным образом.Как мне заставить это работать?

Нужно ли вводить prev в интервале для обновления значения или что-то в этом роде?

Answer 1

Попробуйте следующее.Это должно работать, так как предыдущее значение сохраняется в экземпляре компонента.

componentDidMount() {
    this.prev = window.scrollY;
    window.addEventListener('scroll', e => this.handleNavigation(e));
}

handleNavigation = (e) => {
    const window = e.currentTarget;

    if (this.prev > window.scrollY) {
        console.log("scrolling up");
    } else if (this.prev < window.scrollY) {
        console.log("scrolling down");
    }
    this.prev = window.scrollY;
};