Как отловить момент смены направления скролла?

Question

[Ольга]

componentDidMount() {
		this.lastScrollPos = getScrollTop();
		window.addEventListener('scroll', this.scrollUpDown);
	}
	componentWillUnmount() {
		window.removeEventListener('scroll', this.scrollUpDown);
	}

scrollUpDown() {
		const scroll =  this.lastScrollPos;
		this.lastScrollPos = getScrollTop();
	
		if (scroll < this.lastScrollPos) {
			this.setState({shownMenu: false});
			console.log('скролим вниз');
			return;
		}
		if (scroll > this.lastScrollPos) {
			this.setState({ shownMenu: true});
			console.log('скролим вниз');
		}
	}

нужно в переменную сохранить значение проскролленых пикселей в момент, когда меняется направление скролла
getScrollTop() - кроссбраузерная функция определения количества проскролленых пикселей

Comments

[Антон Спирин]

весь код скиньте. Не понятно, где вы этот метод вызываете.

[Ольга]

Антон Спирин, обновила вопрос, функция вызывается на событии 'scroll'

Answer 1

[Ольга]

сделала вот так, в зависимости от направления скролла показывается или исчезает меню, тут используется еще и задержка в 150px для мобилки и 300 px для остальных респонсивов
scrollUpDown() {
const isMobile = this.getLayout();

const delay = isMobile ? 150 : 300;

const scroll = this.lastScrollPos;
this.lastScrollPos = getScrollTop();
const direction = this.direction; // cтарое значение направления

this.direction = (scroll < this.lastScrollPos);

if (direction !== this.direction) {
this.scrollUp = this.lastScrollPos;// значение скролла при смене направления
}

if (Math.abs(this.scrollUp - this.lastScrollPos) > delay) {
this.setState({shownMenu: !this.direction});
}
}