Preview:
detectScrollDirection = () => {
  const { scrollDirection } = this.state;
  let savedNum = 0;

  document.addEventListener('scroll', () => {
    let nowScrollTop = document.documentElement.scrollTop;
    if ((nowScrollTop - savedNum) >= 0 && (scrollDirection !== 1)) {
      savedNum = nowScrollTop;
      this.setState({
        scrollDirection: 1
      });
    }
    else if ((nowScrollTop - savedNum) < 0 && (scrollDirection !== -1)) {
      savedNum = nowScrollTop;
      this.setState({
        scrollDirection: -1
      });
    }
  });
};
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter