React) detect scroll direction | 스크롤 방향 감지하기

스크롤 다운할때는 헤더 메뉴가 안보이고, 업할때 보이게 하는 기능을 만들고 싶어서 찾은 방법! 

 

    const handleOnWheel = (e) => {
        if (e.nativeEvent.wheelDelta > 0) {
            // scroll up event
            console.log('scroll up');
            setHide(false);
          } else {
            // scroll down event 
            console.log('scroll down');
            setHide(true)
        }
    }

<div onWheel={handleOnWheel}> .. </div>

 

---

References

• http://blog.jonathanargentiero.com/detect-scroll-direction-on-react/