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 }); } }); };
Preview:
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