How to catch the moment of change the direction of scrolling?

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('will scroom down');
return;
}
 if (scroll > this.lastScrollPos) {
 this.setState({ shownMenu: true});
 console.log('will scroom down');
}
 }

need a variable to store the value prorolling pixels at a time when changing direction scrolling
getScrollTop() - cross-browser function to determine the number of pixels prorolling
June 8th 19 at 16:46
1 answer
June 8th 19 at 16:48
Solution
to do this, depending on the direction of scrolling is displayed or disappears menu, there is also used the delay to 150px for cellphones and 300 px for the remaining responsives
scrollUpDown() {
const isMobile = this.getLayout();

const delay = isMobile ? 150 : 300;

const scroll = this.lastScrollPos;
this.lastScrollPos = getScrollTop();
const direction = this.direction; // the old value of the direction

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

if (direction !== this.direction) {
this.scrollUp = this.lastScrollPos;// value of scrolling when you change the direction
}

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

Find more questions by tags React