스크롤을 내리고 올리는지 체크하는법

스크롤 이동전의 변수값 lastScrollTop과 이동범위인 변수값 st를 비교하여

스크롤이 아래 또는 위로 이동여부를 체크할 수 있습니다.

 

이때 변수값 delta를 이용해 어느정도 이상 움직였을때 체크할지 범위를 비교하여

return시켜주는 분기를 7줄에 추가했습니다.

너무 미세하게 반응할경우 스크롤값에 따라 반응하는 액션이(예를들어 헤더가 나타나고 사라지는 모션)

지저분해질수 있기 때문입니다

사용자 환경에 따라 차이가 있겠지만 delta = 100 정도면 마우스휠을 연속으로 2번이상 정도 움직였을때 반응하는걸 테스트해볼 수 있습니다

 

See the Pen 스크롤 위아래 이동체크 by 장명호 (@jangmang) on CodePen.

감사합니다 :)