CSS 오버스크롤 동작 모듈 레벨 1

1. 소개

이 섹션은 규범적이지 않습니다.

콘텐츠 작성자는 모든 스크롤 체이닝이 모든 스크롤 컨테이너에서 발생하길 원하지 않을 수 있습니다. 일부 스크롤 컨테이너는 컨테이닝 블록 체인의 일부일 수 있지만, 문서 내에서 다른 논리적 목적을 가지고 있고 스크롤이 스크롤 체인을 따라 계속되는 것을 막고 싶을 수 있습니다. 이를 위해 콘텐츠 작성자는 passive 플래그를 설정하지 않고 이벤트 리스너를 설치하며, 스크롤 체이닝이 발생할 위험이 있는 경우 preventDefault를 사용합니다. 이는 다음과 같은 이유로 바람직하지 않습니다:

• 사용자 에이전트가 미래에 콘텐츠 작성자의 이벤트 리스너가 지원하지 않는 새로운 입력 방식의 스크롤을 도입할 수 있습니다.

• non-passive 이벤트 리스너는 스크롤 지연을 유발하는데, 이는 사용자 에이전트가 preventDefault가 호출되었는지 결과를 기다려야 하므로 스크롤 대기 시간이 증가합니다.

• 스크롤이 스크롤 경계 근처에서 수행될 때, 기본 동작이 스크롤 컨테이너의 끝까지 스크롤을 수행함과 동시에 경계 기본 동작을 유발할 수 있습니다. preventDefault를 호출하면 경계 기본 동작뿐 아니라 스크롤포트의 끝까지의 스크롤도 취소됩니다.

• 이벤트의 기본 동작이 콘텐츠 작성자가 취소하고 싶지 않은 추가 동작(예: 오버스크롤 피드백)을 제공할 수 있습니다. preventDefault는 콘텐츠 작성자가 스크롤 체이닝과 같은 기본 동작만 부분적으로 취소할 수 있는 방법을 제공하지 않습니다.

따라서 콘텐츠 작성자가 스크롤 체이닝과 오버스크롤을 견고하고, 성능 면에서, 미래 호환적으로 제어하는 것은 불가능합니다. overscroll-behavior 속성은 이러한 문제를 해결합니다.

2. 동기 예시

#sidebar {
  overscroll-behavior: contain;
}

html {
  /* 풀-투-리프레시만 비활성화하고 스와이프 내비게이션은 허용 */
  overscroll-behavior-y: contain;
}

#infinite_scroller {
  overscroll-behavior-y: none;
}

3. 스크롤 체이닝 및 경계 기본 동작

운영체제는 스크롤 체이닝 및 오버스크롤 피드백과 같은 스크롤 규칙을 가지고 있습니다. 이 명세는 스크롤 체이닝이나 오버스크롤 피드백이 어떻게 구현되는지, 또는 구현 여부를 요구하지 않습니다. 이 명세는 구현된 경우, 콘텐츠 작성자가 이를 비활성화할 수 있도록만 합니다.

스크롤 체이닝이란 하나의 스크롤 컨테이너에서 상위 스크롤 컨테이너로 스크롤 체인을 따라 스크롤이 전파되는 것입니다. 일반적으로 스크롤 체이닝은 이벤트 타겟에서 시작해 컨테이닝 블록 체인을 따라 재귀적으로 진행됩니다. 이 체인에 있는 스크롤 컨테이너가 스크롤 이벤트나 제스처를 받으면 이를 처리하거나, 체인을 따라 상위로 넘길 수 있습니다. 체이닝은 스크롤포트가 경계에 도달했을 때 주로 발생합니다.

스크롤 체인은 하나의 스크롤 컨테이너에서 다른 컨테이너로 스크롤이 전파되는 순서를 의미합니다. 뷰포트는 문서의 스크롤 체이닝에 scrollingElement로서 참여하며, 스크롤 체인 내 위치와 적용되는 체이닝 규칙 모두에 해당됩니다.

스크롤 경계는 스크롤 컨테이너의 스크롤 위치가 스크롤포트의 끝에 도달한 상태를 의미합니다. 만약 스크롤 컨테이너가 스크롤 가능성이 없고, 스크롤 방향으로 overflow하지 않으면, 해당 요소는 항상 스크롤 경계에 있는 것으로 간주됩니다.

경계 기본 동작은 사용자 에이전트가 정의한 기본 동작으로, 스크롤이 스크롤포트의 끝에서 수행됩니다. 로컬 경계 기본 동작은 경계 기본 동작 중 페이지와 상호작용하지 않고, 예를 들어 오버스크롤 UI 피드백을 표시하는 것과 같이 스크롤 컨테이너 자체에서 수행되는 동작입니다. 반대로 비로컬 경계 기본 동작은 페이지와 상호작용하는 동작(예: 스크롤 체이닝 또는 내비게이션 동작)입니다.

4. 오버스크롤 동작 속성

오버스크롤 동작은 경계 기본 동작이 스크롤 컨테이너 요소의 스크롤포트가 스크롤 박스의 경계에 도달할 때 허용되는지를 제어합니다.

overscroll-behavior 속성은 오버스크롤 동작을 스크롤 컨테이너 요소에 대해 지정합니다. 콘텐츠 작성자가 스크롤 컨테이너 요소가 스크롤 체이닝 또는 오버스크롤 피드백을 방지해야 함을 지정할 수 있습니다.

스크롤 컨테이너가 아닌 요소는 이 속성 값을 받아들이지만 무시해야 합니다. 이 속성은 사용자 에이전트가 지원하는 모든 스크롤 방식에 적용되어야 합니다.

참고: 이 속성은 스크롤 체이닝 및 오버스크롤 방지에 대해 최소한 preventDefault만큼 강력한 보장을 제공해야 합니다. 그렇지 않으면 콘텐츠 작성자는 대신 preventDefault를 사용하게 됩니다.

overscroll-behavior 속성은 overscroll-behavior-x와 overscroll-behavior-y에 지정된 값을 순서대로 설정하는 축약 속성입니다. 하나의 값만 지정되면, 두 번째 값은 동일한 값으로 기본 설정됩니다.

값의 의미는 다음과 같습니다:

contain

이 값은 해당 요소가 스크롤 체이닝이나 내비게이션과 같은 비로컬 경계 기본 동작을 수행하지 않아야 함을 의미합니다. 사용자 에이전트는 스크롤이 이 요소 또는 그 하위에서 발생했는지와 관계없이 스크롤 체인을 따라 상위로 스크롤 체이닝을 수행하지 않아야 합니다. 이 값은 로컬 경계 기본 동작(예: 오버스크롤 피드백 표시)의 동작에는 영향을 주지 않습니다.

none

이 값은 contain과 동일한 동작을 의미하며, 추가로 해당 요소에서 로컬 경계 기본 동작도(예: 오버스크롤 피드백 표시) 수행하지 않아야 합니다.

auto

이 값은 사용자 에이전트가 경계 기본 동작을 스크롤 체이닝, 오버스크롤, 내비게이션 제스처에 대해 통상적으로 수행해야 함을 의미합니다.

참고: 사용자 에이전트가 스크롤 체이닝과 오버스크롤 피드백을 구현하지 않는 경우, 준수 구현에서는 이러한 값이 부작용을 일으키지 않습니다.

참고: 프로그래밍 방식으로 스크롤되는 경우에는 스크롤이 클램프되며, 어떤 경계 기본 동작도 트리거되지 않습니다.

4.1. overscroll-behavior의 물리적 롱핸드

overscroll-behavior-x 속성은 가로 축에서의 오버스크롤 동작을 지정하며, overscroll-behavior-y 속성은 세로 축에서의 오버스크롤 동작을 지정합니다. 스크롤이 가로와 세로 축 모두에서 동시에 수행될 때, 각 축의 오버스크롤 동작은 독립적으로 고려되어야 합니다.

4.2. overscroll-behavior의 플로우 상대 롱핸드

이 속성들은 overscroll-behavior-x 및 overscroll-behavior-y 속성에 대응합니다. 매핑 방식은 요소의 writing-mode에 따라 달라집니다.

5. 보안 및 프라이버시 고려사항