Сохранение позиции прокрутки по изменению направления прокрутки

Question

Я работаю над реактивным модулем, который обрабатывает отображение и скрытие элемента состояния на основе положения прокрутки. У меня есть функциональность, но мне нужно уловить scroll position об изменении направления.

Вот соответствующие фрагменты кода, все привязки и слушатели событий функциональны:

this.state = { 
    lastScrollPos: 0, 
    down: true 
}; 

_scrollFunction() { 
    const thisPos = window.pageYOffset; 
    const down = thisPos > this.state.lastScrollPos; 

    if (down) { 
    this.setState({ 
     down: true, 
     lastScrollPos: thisPos 
    }); 
    } else if (!down) { 
    this.setState({ 
     down: false, 
     lastScrollPos: thisPos 
    }); 
    } 

} 

В _scrollFunction() выше, установка lastScrollPos: thisPos дает мне позицию прокрутки перед страница прокручивается снова.

Мой вопрос: как можно зафиксировать положение прокрутки, когда изменилось направление прокрутки. Если я прокручиваю вниз, прокручиваю вверх, мне нужно знать, где оно произошло, и наоборот.

Любые советы по этому поводу оцениваются! Спасибо!

Answer 1

Вы должны проверить в _scrollFunction значение тока down значение отличное от down значение из состояния. Если да, напишите thisPos значение changedPos переменная состояния.

Рабочий пример:

constructor() { 
    super(); 

    this.state = { 
    lastScrollPos: 0, 
    changedPos: undefined, 
    down: true 
    }; 
} 

_scrollFunction() { 
    const thisPos = window.pageYOffset; 
    const down = thisPos > this.state.lastScrollPos; 
    // If current `down` value is differs from `down` from state, 
    // assign `thisPos` to variable, else assigning current `changedPos` state value. 
    const changedPos = down !== this.state.down ? thisPos : this.state.changedPos; 

    this.setState({ 
    lastScrollPos: thisPos, 
    changedPos, 
    down 
    }); 
} 

Кроме того, я сделал рабочий пример на CodePen, вы можете проверить это для получения дополнительной информации.