[JS] pull to refresh 구현시 ios scroll bounce 비활성화 시키기

pull to refresh를 구현하다가 막혔던 ios 이슈를 해결한 방법을 기록해보려고 한다. 현업에서 일하다 보면 내 블로그를 내가 참고하게 되는 일이 참 많다. 과거의 나에게 또 물을 수 있도록 미루던 블로깅을 이제서야 한다.🥲

ios에서는 기본적으로 scroll bounce 이라는 효과를 제공한다. 이는 페이지 최상/하단에 도달했을 때 페이지가 고무줄처럼 늘어나는 효과인데, 스크롤이 관성적으로 작용한다.
좋은 UX이긴 하지만, 프론트엔드 개발자로서 다양한 이벤트들을 적용하다보면 골칫거리가 되기도 한다...ㅎㅎ

pull to refresh UI를 구현하다가 scroll bounce와 스크롤 이벤트가 충돌하여 애를 먹은 적이 있었다. (왜 항상 aos에서는 정상 작동하는데, ios 너만...)

서론이 길었지만, 스크롤 바운스 막는 방법은 다음과 같다.

• html, body 태그 overflow: hidden;
• body 태그 position: fixed; inset: 0

// pulling 중일 때 ios 스크롤 바운스 비활성화 처리
isPulling(n) {
  if (n) {
    // ios 스크롤 바운스 방지
    document.documentElement.style.overflow = 'hidden';
    document.body.style.overflow = 'hidden';
    document.body.style.position = 'fixed';
    document.body.style.inset = '0px';
  } else {
    // ios 스크롤 바운스 방지 해제
    document.documentElement.style.overflow = 'auto';
    document.body.style.overflow = 'auto';
    document.body.style.position = '';
    document.body.style.inset = '';
  }
}

참고로 나는 pull to refresh 시에만 스크롤 바운스를 비활성화 시키고 싶었기에 pulling 이벤트가 진행 중일 땐 해당 css를 적용시켰다가 pulling이 끝나면 css를 초기화 시켜 비활성화를 해지시켰다.