요약
개발자는 CSS overscroll-behavior 속성을 사용하여
페이지 상단/하단에 도달했을 때 브라우저의 기본 오버플로 스크롤 동작이
있습니다. 당겨서 새로고침을 사용 중지하는 사용 사례
오버스크롤 발광 효과와 고무밴드 효과 삭제,
모달/오버레이 아래에 있을 때 페이지 콘텐츠가 스크롤되지 않도록 합니다.
배경
스크롤 경계 및 스크롤 체인
<ph type="x-smartling-placeholder">스크롤은 페이지와 상호작용하는 가장 기본적인 방법 중 하나이지만 브라우저의 별난 특징 때문에 특정 UX 패턴을 처리하기가 까다로울 수 있습니다. 기본 동작입니다. 예를 들어 많은 수의 사용자가 스크롤해야 할 수도 있는 항목을 표시합니다. 최저치에 도달하면 오버플로 컨테이너가 스크롤을 중지합니다. 즉, 사용자는 '스크롤 경계'에 도달합니다. 하지만 사용자가 계속하여 스크롤하세요. 창 뒤에 있는 콘텐츠가 스크롤을 시작합니다. 스크롤 상위 컨테이너가 인계받아 작업합니다. 기본 페이지 자체를 예로 들 수 있습니다.
이 동작을 스크롤 체이닝이라고 합니다. 브라우저의 기본값 스크롤할 때 발생하는 동작입니다. 종종 기본이 꽤 좋지만 때로는 바람직하지 않거나 예상치 못한 경우도 있습니다. 특정 앱에서는 사용자가 스크롤 경계에 도달하면 다른 사용자 환경을 제공합니다.
당겨서 새로고침 효과
당겨서 새로고침은 모바일 앱에서 널리 사용되는 직관적인 동작입니다. Facebook 및 Twitter 소셜 피드를 내리고 놓으면 더 많은 최근 게시물을 로드할 수 있습니다. 실제로 이 특정 UX에서는 너무 유명해져 Android의 Chrome과 같은 모바일 브라우저가 동일한 효과를 얻을 수 있습니다. 페이지 상단에서 아래로 스와이프하면 전체 페이지가 새로고침됩니다.
당겨서 새로고침하는 커스텀 PWA에 관한 것입니다.
있습니다.
트위터 PWA와 같은 상황의 경우
당겨서 새로고침 작업을
사용 중지하는 것이 좋습니다 왜냐하면 이
사용자가 실수로 페이지를 새로고침하는 일이 없도록 해야 합니다. 이
이중 새로고침 애니메이션이 표시될 가능성도 있습니다. 또는
브라우저의 동작을 더욱 멋지게 맞춤설정하고 사이트의
브랜드 인지도 제고를 목표로 하는 광고주 안타깝게도, 이러한 유형의 맞춤설정은
분리하기가 까다롭습니다. 개발자가 불필요한 자바스크립트를 작성하게 되므로
비수동
터치 리스너 (스크롤 차단) 또는 전체 페이지를 100vw/vh로 고정
<div> (페이지 오버플로 방지) 이러한 해결 방법은
잘 문서화된 부정적
영향을 미치지 않습니다.
더 잘 할 수 있어!
overscroll-behavior 소개
overscroll-behavior 속성은
컨테이너(
페이지 자체). 이를 사용하여 스크롤 체인을 취소하거나,
당겨서 새로고침 작업, iOS에서 고무밴드 효과 사용 중지 (Safari의 경우
구현 overscroll-behavior) 등이 있습니다.
가장 좋은 점은 overscroll-behavior를 사용해도 부정적인 영향을
인트로에서 언급한 꿀팁 같은 페이지 성능을 개선할 수 있습니다.
이 속성은 다음 세 가지 값을 사용할 수 있습니다.
- auto - 기본값입니다. 요소에서 발생한 스크롤은 할 수 있습니다.
- contain - 스크롤 체인을 방지합니다. 스크롤이 상위 요소에 전파되지 않음
노드 내의 국소적인 효과가 표시됩니다. 예를 들어 오버스크롤 발광 효과는
사용자에게 알리는 고무밴드 효과, Android의 경우
스크롤 경계에 도달하면 발생합니다 참고:
html요소의overscroll-behavior: contain이 오버스크롤을 방지함 탐색 작업 - none -
contain와 같지만 내부에서 오버스크롤 효과도 방지합니다. 노드 자체 (예: Android 오버스크롤 글로우 또는 iOS 러버밴딩)
몇 가지 예를 통해 overscroll-behavior 사용 방법을 자세히 살펴보겠습니다.
스크롤이 고정 위치 요소를 이스케이프하지 않도록 방지
채팅 상자 시나리오
<ph type="x-smartling-placeholder">페이지 하단에 위치가 고정된 채팅 상자를 생각해 보세요. 이 채팅 상자가 독립 실행형 구성요소이고 콘텐츠를 분리할 수 있습니다 그러나 스크롤 체인으로 인해 사용자가 채팅에서 마지막 메시지를 입력하는 즉시 문서가 스크롤되기 시작함 기록.
이 앱의 경우 스크롤을 아래로 스크롤하는 것이
채팅 상자가 채팅 내에 머무르지 않습니다. 이렇게 하려면
채팅 메시지가 포함된 요소에 overscroll-behavior: contain를 추가합니다.
#chat .msgs {
overflow: auto;
overscroll-behavior: contain;
height: 300px;
}
기본적으로 채팅 상자의 스크롤과 기본 페이지가 표시됩니다. 결과적으로, 웹페이지에 광고를 게재할 때 사용자가 채팅 기록의 상단/하단에 도달할 때 다음에서 시작하는 스크롤 채팅 상자가 전파되지 않습니다.
페이지 오버레이 시나리오
'언더스크롤'의 또 다른 변형인 시나리오에 표시되는 것은
고정 위치 오버레이 뒤로 스크롤 죽은 경품
overscroll-behavior 일정을 완료했습니다. 브라우저는 사용자에게 도움을 주려고
사이트가 버그처럼 보이게 됩니다.
예 - overscroll-behavior: contain 유무와 관계없는 모달
당겨서 새로고침 사용 중지
당겨서 새로고침 작업을 사용 중지하는 작업은 한 줄의 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="refresher">
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
<section id="inbox"><!-- msgs --></section>
<script>
let _startY;
const inbox = document.querySelector('#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.classList.contains('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