당겨서 새로고침 및 오버플로 효과를 맞춤설정하여 스크롤을 관리하세요

요약

CSS overscroll-behavior 속성을 사용하면 개발자가 콘텐츠의 상단/하단에 도달할 때 브라우저의 기본 오버플로 스크롤 동작을 재정의할 수 있습니다. 사용 사례로는 모바일에서 당겨서 새로고침 기능 사용 중지, 오버스크롤 글로우 및 러버밴딩 효과 삭제, 모달/오버레이 아래에 있는 페이지 콘텐츠 스크롤 방지 등이 있습니다.

배경

스크롤 경계 및 스크롤 체이닝

Chrome Android의 스크롤 체이닝

스크롤은 페이지와 상호작용하는 가장 기본적인 방법 중 하나이지만, 브라우저의 특이한 기본 동작으로 인해 특정 UX 패턴은 처리하기 까다로울 수 있습니다. 예를 들어 사용자가 스크롤해야 할 수 있는 항목이 많은 앱 검색 창을 살펴보겠습니다. 하단에 도달하면 더 이상 사용할 콘텐츠가 없으므로 오버플로 컨테이너가 스크롤을 중지합니다. 즉, 사용자가 '스크롤 경계'에 도달합니다. 하지만 사용자가 계속 스크롤하면 어떻게 되는지 확인하세요. 드로어 뒤의 콘텐츠가 스크롤되기 시작합니다. 스크롤은 상위 컨테이너(예시의 기본 페이지 자체)에서 처리됩니다.

이 동작은 스크롤 체이닝이라고 하며, 콘텐츠를 스크롤할 때 브라우저의 기본 동작입니다. 기본값이 좋은 경우가 많지만, 원하지 않거나 예상치 못한 경우도 있습니다. 특정 앱은 사용자가 스크롤 경계에 도달할 때 다른 사용자 환경을 제공하고자 할 수 있습니다.

당겨서 새로고침 효과

당겨서 새로고침은 Facebook 및 Twitter와 같은 모바일 앱에서 널리 사용되는 직관적인 동작입니다. 소셜 피드를 아래로 당겼다가 놓으면 더 최근 게시물을 로드할 수 있는 새로운 공간이 생성됩니다. 실제로 이 특정 UX는 매우 인기가 높아져 Android의 Chrome과 같은 모바일 브라우저에서 동일한 효과를 채택했습니다. 페이지 상단에서 아래로 스와이프하면 전체 페이지가 새로고침됩니다.

PWA에서 피드를 새로고침할 때 Twitter의 맞춤 당겨서 새로고침
Chrome Android의 기본 당겨서 새로고침 작업은
전체 페이지를 새로고침합니다.

트위터 PWA와 같은 상황에서는 기본 당겨서 새로고침 작업을 사용 중지하는 것이 좋습니다. 그 이유는 무엇인가요? 이 앱에서는 사용자가 실수로 페이지를 새로고침하는 것을 원하지 않을 것입니다. 새로고침 애니메이션이 두 번 표시될 수도 있습니다. 또는 브라우저의 작업을 맞춤설정하여 사이트의 브랜딩에 더 가깝게 조정하는 것이 더 좋을 수도 있습니다. 안타깝게도 이러한 유형의 맞춤설정은 구현하기가 까다로웠습니다. 개발자는 불필요한 JavaScript를 작성하거나, 비수동 터치 리스너(스크롤을 차단함)를 추가하거나, 전체 페이지를 100vw/vh <div>에 고정하여 페이지가 오버플로되지 않도록 합니다. 이러한 해결 방법은 스크롤 성능에 부정적인 영향을 미치는 것으로 잘 알려져 있습니다.

더 잘할 수 있습니다.

overscroll-behavior 소개

overscroll-behavior 속성은 컨테이너 (페이지 자체 포함)를 오버스크롤할 때 발생하는 동작을 제어하는 새로운 CSS 기능입니다. 이를 사용하여 스크롤 체이닝을 취소하고, 당겨서 새로고침 작업을 사용 중지/맞춤설정하고, iOS에서 러버밴딩 효과를 사용 중지 (Safari에서 overscroll-behavior를 구현하는 경우)하는 등의 작업을 할 수 있습니다. 가장 좋은 점은 overscroll-behavior를 사용해도 소개에서 언급한 편법과 달리 페이지 성능에 부정적인 영향을 미치지 않는다는 것입니다.

이 속성은 다음 세 가지 값을 사용합니다.

  1. auto - 기본값입니다. 요소에서 시작된 스크롤은 상위 요소로 전파될 수 있습니다.
  2. contain - 스크롤 체이닝을 방지합니다. 스크롤은 상위 요소로 전파되지 않지만 노드 내의 로컬 효과는 표시됩니다. 예를 들어 Android의 오버스크롤 글로우 효과 또는 iOS의 러버밴딩 효과는 사용자가 스크롤 경계에 도달하면 사용자에게 알립니다. 참고: html 요소에 overscroll-behavior: contain를 사용하면 오버스크롤 탐색 작업이 방지됩니다.
  3. none - contain와 동일하지만 노드 자체 내에서 오버스크롤 효과 (예: Android 오버스크롤 글로우 또는 iOS 러버밴딩)도 방지합니다.

몇 가지 예를 통해 overscroll-behavior를 사용하는 방법을 살펴보겠습니다.

스크롤이 고정 위치 요소에서 벗어나지 않도록 방지

채팅 상자 시나리오

채팅 창 아래의 콘텐츠도 스크롤됨 :(

페이지 하단에 고정된 채팅 상자를 생각해 보세요. 채팅 상자는 독립적인 구성요소이며 뒤에 있는 콘텐츠와 별도로 스크롤됩니다. 하지만 스크롤 체이닝으로 인해 사용자가 채팅 기록의 마지막 메시지에 도달하는 즉시 문서가 스크롤되기 시작합니다.

이 앱의 경우 채팅 상자 내에서 시작되는 스크롤은 채팅 내에 유지되는 것이 더 적절합니다. 채팅 메시지를 보유하는 요소에 overscroll-behavior: contain를 추가하면 됩니다.

#chat .msgs {
  overflow: auto;
  overscroll-behavior: contain;
  height: 300px;
}

기본적으로 채팅 상자의 스크롤 컨텍스트와 기본 페이지를 논리적으로 분리합니다. 최종 결과는 사용자가 채팅 기록의 상단/하단에 도달할 때 기본 페이지가 그대로 유지된다는 것입니다. 채팅 상자에서 시작되는 스크롤은 외부로 전파되지 않습니다.

페이지 오버레이 시나리오

'언더스크롤' 시나리오의 또 다른 변형은 고정 위치 오버레이 뒤에서 콘텐츠가 스크롤되는 경우입니다. overscroll-behavior에 공짜 선물이 도착했습니다! 브라우저는 도움을 주려고 하지만 결국 사이트에 버그가 있는 것처럼 보이게 합니다.

예 - overscroll-behavior: contain가 있는 모달과 없는 모달:

이전: 페이지 콘텐츠가 오버레이 아래로 스크롤됩니다.
After: 페이지 콘텐츠가 오버레이 아래로 스크롤되지 않습니다.

당겨서 새로고침 사용 중지

당겨서 새로고침 작업을 사용 중지하는 것은 CSS 한 줄로 가능합니다. 전체 표시 영역 정의 요소에서 스크롤 체이닝을 방지하면 됩니다. 대부분의 경우 <html> 또는 <body>입니다.

body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
}

이 간단한 추가를 통해 채팅 상자 데모에서 이중 당겨서 새로고침 애니메이션을 수정하고 대신 더 깔끔한 로드 애니메이션을 사용하는 맞춤 효과를 구현할 수 있습니다. 받은편지함이 새로고침되면 전체 받은편지함도 흐리게 표시됩니다.

이전
이후

다음은 전체 코드의 스니펫입니다.

<style>
  body.refreshing #inbox {
    filter: blur(1px);
    touch-action: none; /* prevent scrolling */
  }
  body.refreshing .refresher {
    transform: translate3d(0,150%,0) scale(1);
    z-index: 1;
  }
  .refresher {
    --refresh-width: 55px;
    pointer-events: none;
    width: var(--refresh-width);
    height: var(--refresh-width);
    border-radius: 50%;
    position: absolute;
    transition: all 300ms cubic-bezier(0,0,0.2,1);
    will-change: transform, opacity;
    ...
  }
</style>

<div class="refre>she<r"
  div class=&qu><ot;l>oad<ing-bar"/div
  div>< cla>ss=<"loading-bar"></div>
  <div class="loading><-bar>&<quot>;/<div
  div class=&q><uot;loading><-bar&quo>t;</div
/>div

section id="inbox"!-- msgs --/section

script
  let _startY;
  const inbox = document.querySel>ector('#inbox');

  inbox.addEventListener('touchstart', e = {
    _startY = e.touches>[0].pageY;
  }, {passive: true});

  inbox.addEventListener('touchmove', e = {
    const y = e.touches[0].pageY;
    // Activate custom pull-to-refresh effects when at the top of the container&&
  >  // and &&user is scrolling up.
    if (document.scrollingElement.scrollTop === 0  y  _startY 
        !document.body.class<List.co>ntains('refreshing')) {
      // refresh inbox.
    }
  }, {passive: true});
/script

오버스크롤 글로우 및 러버밴딩 효과 사용 중지

스크롤 경계에 도달할 때 바운스 효과를 사용 중지하려면 overscroll-behavior-y: none를 사용합니다.

body {
  /* Disables pull-to-refresh and overscroll glow effect.
     Still keeps swipe navigations. */
  overscroll-behavior-y: none;
}
이전: 스크롤 경계에 도달하면 글로우가 표시됩니다.
변경 후: 글로우 사용 중지됨

전체 데모

모두 종합하면 전체 채팅 상자 데모는 overscroll-behavior를 사용하여 맞춤 당겨서 새로고침 애니메이션을 만들고 스크롤이 채팅 상자 위젯을 벗어나지 않도록 합니다. 이렇게 하면 CSS overscroll-behavior 없이는 달성하기 어려웠을 최적의 사용자 환경이 제공됩니다.

데모 보기 | 소스