[javascript] 모바일 검색창 숨기기 기능 구현 (터치 떨림 보정)

모바일에서 작동하는 검색창을 구현하려던 도중 터치아웃을 하는 순간 스크롤 감지에 의해 검색바가 깜빡이는 현상에 부딧혔다. 해당 버그를 수정하기 위해서 별의 별 짓을 다햇다..

lodash의 throttle 이나 touchout, touchstart 등등 여러가지 이벤트로 핸들링 하려고 해봤지만 깜빡이는 문제를 잡기 쉽지않았다.(스크롤이 워낙 민감하게 동작하기때문에..) 그러던 도중, 해당 글을 발견했고 jQuery 대신 javascript 로 구현한 로직을 짤 수 있었다. 사실, setInterval을 쓸 생각은 하지도 못했는데 덕분에 좋은 기능 구현을 할 수 있었다. :-)

 

javascript

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = 56; // 고정인 경우

window.addEventListener("scroll", () => {
    didScroll = true;
});

setInterval(() => {
    if (didScroll) {
      hasScrolled();
      didScroll = false;
    }
}, 250);
      
function hasScrolled() {
    var st = window.scrollY;
    if (Math.abs(lastScrollTop - st) <= delta) return;
    if (st > lastScrollTop && st > navbarHeight) {
      scrollDown = true;
    } else {
      if (st + window.outerHeight < document.documentElement.scrollHeight) {
        scrollDown = false;
      }
    }
    lastScrollTop = st;
},

 

 

* 참고

스크롤을 감지하여 사이트의 헤더를 보이거나 숨기기