[jQuery] 아이폰(iOS) 사파리 바운스 스크롤(bounce scroll) 대응 헤더

제이쿼리(jQuery)를 이용하여 아이폰(iOS) 사파리 바운스 스크롤(bounce scroll) 감지 대응하기

스크롤 방향에 따라 헤더(header) 숨김/표시 처리를 하여도
아이폰(iOS)의 사파리에서 상단으로 이동할때 바운스 스크롤 이펙트가 작동하면
스크롤 위치가 마이너스로 인식되어 헤더가 표시되지 않는다.

상단 바운스(bounce) 시 스크롤 위치

바운스(bounce) 완료 후 스크롤 위치

문제는 상단에서 바운스 스크롤 이펙트가 작동하고 있을때와 이펙트가 종료되었을 때 
모두 헤더가 표시되지 않는다. 

해결 방법은 기존 방향 감지 이벤트에서 스크롤 위치가 마이너스라도 헤더가 표시될 수 있게만
추가하면 된다.

[js]

let lastScroll = 0;

$(window).scroll(function(){

  let nowScroll = $(this).scrollTop();

  if (lastScroll >= nowScroll || lastScroll < 0){

    // iOS 사파리 bounce effect 시 스크롤 위치 마이너스 할당

    $('header').stop().slideDown(200);

  } else {

    $('header').stop().slideUp(50);

  };

  lastScroll = nowScroll;

});

 

See the Pen [jQuery] scroll iOS bounce effect _ 스크롤 방향 감지 이벤트 (아이폰 사파리 바운스 이펙트 대응) by Jinsik Son (@Jinsik-Son) on CodePen.