iOS elastic scrolling 이슈

 

모바일 웹을 구현한 후 테스트를 진행했다. 

웹에서는 잘만 되던 기능이 모바일에서 문제를 일으켰다. 

아니 정확히 말하자면 ios에서만.

 

페이지의 상단과 하단에 바가 있는데,

스크롤을 아래로 내리면 상단 menu바가 사라지면서 하단의 nav바가 나타나고, 

스크롤을 위로 올리면 상단 menu바가 나타나고 하단 nav바가 사라지게하는 간단한 기능이었다.

 

 

 

 

jQuery와 scroll 이벤트 리스너를 사용하여 스크롤방향을 알아낸 후

상단바와 하단바가 보였다 안보였다하도록 class를 더하고 빼도록 구현했더니 웹과 안드로이드에서는 잘 작동했는데 .... 

 

아이폰 웹브라우저창으로 테스트를 해보니

스크롤을 가장 위로 올렸을때와 맨 끝으로 내렸을 경우 

상단바와 하단바가 나타나지않는 현상이 발생했다. 

 

 

왜지 ??????????? 라는 궁금증을 갖고 이리저리 만져보다가 찾은 ios만의 특이점 !

바로 elastic scrolling 때문이었다🥲

 

iOS 브라우저에서 최하단으로 스크롤한 후 스크롤을 한 번 더 내리면 브라우저가 약간 올라가서 다시 아래로 내려가는 현상은 "elastic scrolling" 또는 "rubber banding"이라고 불립니다.

이는 iOS의 Safari 브라우저에서 적용되는 사용자 경험을 향상시키기 위한 동작 중 하나입니다.사용자가 스크롤한 내용이 끝에 도달하면, 추가로 아래로 스크롤할 때 브라우저가 약간 더 스크롤되어 끝에서 벗어난 콘텐츠를 보여주는 것입니다. 이는 사용자에게 스크롤이 끝에 도달했음을 시각적으로 나타내고, 끝에 도달한 것을 알리는 동시에 다시 콘텐츠를 끝까지 스크롤하도록 유도하기 위한 디자인 요소입니다.

 

그렇다. 바로 이 요소때문에

스크롤방향이 반대로 팅겨져나오며 상단바와 하단바를 제때 보여주지못하는 현상이 일어났던 것 

 

나는 열심히 Disable IOS Safari Elastic Scrolling 이라는 검색어로 이 요소를 비활성화하는 방법을 찾아보았으나

아직까지는 이것을 해결할 수 있는 방법은 없다는 사실을 알게되었고 

 

이 요소를 비활성화할 수 없다면 스크롤이 가장 위와, 아래 위치에 도달하였을 경우를 알아내어 

상단바와 하단바를 보이도록 해야겠다고 생각했다. 

 

스크롤이 상단에 있는지의 여부는 간단히 scrollTop() 으로 알아낼 수 있었고

스크롤이 하단에 도달했는지는 총 영역 - 뷰페이지의 영역 = 현재 스크롤 위치 로 알아내어 

다음과 같이 구현했다

 

window.addEventListener("scroll", function (event) {
    let element = jQuery(this);

    // 전체높이 알아내기
    let bodyHeight = document.body;
    let totalHeight = bodyHeight.scrollHeight;

    // 스크롤의 현재 위치
    let st = element.scrollTop();

    // 뷰페이지영역의 높이
    let ih = element.innerHeight();

    if (st > lastScrollTop || st == totalHeight-ih) {
    jQuery("#header.sticky-on-scrollup").removeClass("show-sticky-onscroll"); // 밑으로 스크롤을 내릴 경우
    jQuery("#mobileNavBar").addClass("show-sticky-onscroll");
    } else if (st <= lastScrollTop || st == 0) {
    jQuery("#header.sticky-on-scrollup").addClass("show-sticky-onscroll"); // 위로 스크롤을 올릴 경우
    jQuery("#mobileNavBar").removeClass("show-sticky-onscroll");
    } 

    lastScrollTop = st;

});

 

 

 

다시 테스트해보니 IOS의 elastic scrolling 으로 인한 스크롤 방향이 역방향이되는 현상과 상관없이 

스크롤 위치에 따라 상단바, 하단바가 제때 나타나도록 구현해낼 수 있었다 !