CSS 스크롤 스냅 모듈 레벨 2

1. 소개

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

현재 이 명세는 Scroll Snap 1에 대한 델타 명세입니다.

스크롤 경험은 항상 처음부터 시작되는 것이 아닙니다. 캐러셀, 스와이프 컨트롤, 리스트뷰와 같은 상호작용은 종종 스크롤 컨테이너의 시작 위치가 아닌 어떤 요소에서 시작하도록 의도됩니다. JavaScript를 사용하여 스크롤 컨테이너가 처음에 해당 요소로 스크롤되도록 해야 했습니다. CSS로 어떤 요소를 처음에 스크롤하도록 지정할 수 있게 하여, 사용자, 페이지 저자, 브라우저 모두가 이점을 얻을 수 있습니다.

초기 스크롤 대상을 설정하는 것뿐만 아니라, 개발자는 Scroll Snap에 대한 인사이트와 이벤트가 필요합니다. 어느 축에서 어떤 요소가 스냅되는지, 스냅 이벤트가 변경되는 시점, 스냅이 완료되는 시점, 그리고 자식 요소로 프로그래밍적으로 스냅하는 편의 기능 등과 같은 이벤트가 필요합니다.

1.1. 첫 번째 레이아웃

이 이벤트는 애니메이션 코드 경로를 따라야 합니다. 애니메이션 객체가 생성되어 이벤트를 발생시킬 때, 박스가 첫 번째 레이아웃을 가지는 시점입니다.

2. 동기부여 예시

.carousel {
    overflow-inline: auto;
}
.carousel .origin {
    scroll-start-target: auto;
}

<div class="carousel">
    <img src="img1.jpg">
    <img src="img2.jpg">
    <img src="img3.jpg" class="origin">
    <img src="img4.jpg">
    <img src="img5.jpg">
</div>

.scrollport {
    overflow-block: auto;
}

main {
    scroll-start-target: auto;
}

<div class="scrollport">
    <nav>
        ...
    </nav>
    <main>
        ...
    </main>
</div>

3. 스크롤 시작 위치 설정

3.1. scroll-start-target 속성

3.1.1. 초기 스크롤 대상

initial scroll target은 scroll container scrollcontainer의 요소 또는 가상 요소로, 'scroll-start-target’ 속성이 none이 아니고, 가장 가까운 scroll container가 scrollcontainer인 경우입니다. 이러한 요소나 가상 요소가 여러 개 있을 경우, 사용자 에이전트는 트리 순서상 먼저 오는 것을 선택해야 합니다. 해당 요소나 가상 요소가 없을 경우, scrollcontainer의 initial scroll target은 null입니다.

3.1.2. scroll-start-target 속성 정의

none

이 요소는 initial scroll target이 아닙니다.

auto

이 요소는 가장 가까운 initial scroll target이 될 수 있습니다. 조상 scroll container에 대해.

3.1.3. place-content와의 상호작용

scroll container의 initial scroll position이 content-distribution property와 하위 요소의 scroll-start-target에 의해 모두 잠재적으로 설정되는 경우, scroll-start-target이 우선합니다.

3.1.4. 첫 번째 레이아웃 이후 도착

문서가 업데이트되는 동안, scroll container의 initial scroll target이 해당 scroll container가 레이아웃된 후에 도착할 수 있습니다. 이 경우, 사용자 에이전트는 initial scroll target으로 여전히 스크롤해야 하며, 사용자 에이전트가 사용자가 더 이상 initial scroll position으로 스크롤하는 것에 관심이 없다고 판단할 이유가 없는 한 그렇습니다.

4. 스냅된 항목 스타일링

':snapped' 가상 클래스는 컨테이너 상태 쿼리 접근 방식으로 대체될 예정입니다.

4.1. 스냅된 요소 가상 클래스: :snapped

:snapped 가상 클래스는 축에 상관없이 모든 스크롤 스냅 타겟을 선택합니다. 물리적 및 논리적 장문의 가상 클래스 셀렉터는 개별 축을 타겟팅할 수 있기 때문에 보다 세분화된 스냅 자식 스타일링이 가능합니다.

더 구체적인 선택지는 아래와 같이 정의됩니다:

:snapped-x

가로 축에서 스냅된 자식을 선택합니다.

:snapped-y

세로 축에서 스냅된 자식을 선택합니다.

:snapped-inline

inline 축에서 스냅된 자식을 선택합니다.

:snapped-block

block 축에서 스냅된 자식을 선택합니다.

참고: 이슈 #6985
초기 프레임의 해상도 결정을 파악할 필요가 있습니다.

5. 스냅 이벤트

5.1. scrollsnapchange 및 scrollsnapchanging

CSS 스크롤 스냅 포인트는 종종 스크롤 인터랙티브 "선택" 컴포넌트를 만들기 위한 메커니즘으로 사용됩니다. 선택은 JavaScript 교차점 관찰자와 스크롤 종료 추정으로 결정됩니다. 내장 이벤트를 만들면, 보이지 않는 상태가 적절한 순간에, 항상 정확하게 동작 가능한 상태가 됩니다.

5.1.1. 스냅 타겟

스냅 타겟은 사용자 에이전트가 선택하여 스냅 대상으로 삼은 스냅 컨테이너의 요소 또는 가상 요소입니다.

5.1.2. scrollsnapchange

scrollsnapchange 이벤트는 스냅 컨테이너가 어느 축에서든 스냅된 영역이 변경되었음을 나타냅니다. scrollsnapchange 이벤트는 다음과 같은 경우에 발생합니다:

1. 스크롤 작업이 완료될 때, block 또는 inline 축 중 하나라도 스냅 컨테이너가 스냅된 스냅 타겟이 최근에 해당 축에서 스냅된 스냅 타겟과 다르면 발생합니다. proximity 엄격도가 있는 스냅 컨테이너는 스크롤 결과로 더 이상 스냅 타겟에 스냅되지 않을 수 있습니다. CSS Scroll Snap 1 § 6.2 스냅 위치 선택는 UA가 스냅 영역 요소 또는 가상 요소 중 선택하는 방법을 설명합니다.
2. 스냅 컨테이너의 스타일이 변경되어 none이 아닌 scroll-snap-type 값에서 none 값으로 또는 그 반대로 변경되는 경우.
3. 레이아웃 변경 후, 스냅 컨테이너가 스냅된 스냅 타겟이 변경될 때(레이아웃 변경 후 스크롤 위치가 변경되지 않아도 해당).

스크롤 작업은 항상 scrollend 이벤트를 발생시킵니다. 만약 스크롤 작업이 scrollsnapchange 이벤트도 발생시키는 경우, scrollsnapchange 이벤트가 scrollend 이벤트 전에 발생해야 합니다.

각 Document 는 대기 중인 scrollsnapchange 이벤트 타겟 목록을 가지고 있으며, 처음에는 비어 있습니다.

각 스냅 컨테이너에는 block 축과 inline 축에 대해 각각 scrollsnapchangeTargetBlock과 scrollsnapchangeTargetInline이 있으며, 해당 축에서 컨테이너가 스냅되지 않은 경우 null이거나, 스냅된 스냅 타겟입니다.

scrollsnapchange 타겟 업데이트를 요청받으면, 스냅 컨테이너 snapcontainer에 대해 다음 단계를 진행하세요:

1. doc을 snapcontainer와 연결된 Document로 설정합니다.

2. blockTarget을 scrollsnapchangeTargetBlock으로 설정합니다. snapcontainer에 연결된 값입니다.

3. inlineTarget을 scrollsnapchangeTargetInline으로 설정합니다. snapcontainer에 연결된 값입니다.

4. blockScrollSnapchangingTarget을 scrollsnapchanging block 축 타겟으로 설정합니다. snapcontainer에 연결된 값입니다.

5. inlineScrollSnapchangingTarget을 scrollsnapchanging inline 축 타겟으로 설정합니다. snapcontainer에 연결된 값입니다.

6. snap targets changed라는 불리언 플래그를 false로 초기화합니다.

7. blockTarget이 스냅 타겟으로서 blockScrollSnapchangingTarget과 다르다면

   1. snapcontainer에 연결된 scrollsnapchangeTargetBlock을 blockScrollSnapchangingTarget으로 설정합니다.

   2. snap targets changed를 true로 설정합니다.

8. inlineTarget이 스냅 타겟으로서 inlineScrollSnapchangingTarget과 다르다면:

   1. snapcontainer에 연결된 scrollsnapchangeTargetInline을 inlineScrollSnapchangingTarget으로 설정합니다.

   2. snap targets changed를 true로 설정합니다.

9. snap targets changed가 true라면:

   1. snapcontainer가 doc의 대기 중인 scrollsnapchange 이벤트 타겟 목록에 이미 포함되어 있지 않다면:

      1. snapcontainer를 doc의 대기 중인 scrollsnapchange 이벤트 타겟 목록에 추가합니다.

참고: 스크롤러에서(레이아웃 변경 또는 스크롤 작업으로 인해) 스냅이 발생할 때, 해당 스크롤러와 연결된 scrollsnapchanging block 축 타겟과 scrollsnapchanging inline 축 타겟은 업데이트되어 현재 스냅 타겟을 나타냅니다. 이로 인해 scrollsnapchange 타겟 업데이트 알고리즘에서 이 스냅 타겟을 사용해 scrollsnapchange 이벤트 발생 여부를 결정할 수 있습니다.

대기 중인 scrollsnapchange 이벤트 디스패치를 요청받으면, Document doc에 대해 다음 단계를 수행하세요:

1. doc의 대기 중인 scrollsnapchange 이벤트 타겟 목록의 각 target에 대해:

   1. blockTarget과 inlineTarget를 처음에 null로 설정합니다.

   2. scrollsnapchangeTargetBlock이 target에 연결된 값이 가상 요소라면, blockTarget을 해당 scrollsnapchangeTargetBlock의 소유 요소로 설정합니다.

   3. 그렇지 않으면, blockTarget을 해당 scrollsnapchangeTargetBlock 값으로 설정합니다.

   4. scrollsnapchangeTargetInline이 target에 연결된 값이 가상 요소라면, inlineTarget을 해당 scrollsnapchangeTargetInline의 소유 요소로 설정합니다.

   5. 그렇지 않으면, inlineTarget을 해당 scrollsnapchangeTargetInline 값으로 설정합니다.

   6. SnapEvent snapevent를 scrollsnapchange 이름으로 target에 발생시키고, snapevent의 snapTargetBlock과 snapTargetInline 속성을 각각 blockTarget, inlineTarget으로 설정합니다.

2. doc의 대기 중인 scrollsnapchange 이벤트 타겟 목록을 비웁니다.

5.1.3. scrollsnapchanging

• 스크롤 중에 스냅 타겟이 스냅 컨테이너가 스냅할(어느 축에서든) 대상이 변경될 때, 또는

• 레이아웃 변경이 일어나 scrollsnapchange 이벤트를 발생시켜야 할 경우. 이때도 스크롤 중인 경우와 마찬가지로 scrollsnapchanging 이벤트가 scrollsnapchange 이벤트보다 먼저 발생해야 합니다.

스크롤 동작은 특정 위치로 애니메이션될 수 있습니다(예: 스크롤바 화살표 클릭, 방향키 입력, "behavior: smooth"로 프로그래밍된 스크롤) 또는 사용자의 입력을 직접 추적할 수 있습니다(예: 터치 스크롤, 스크롤바 드래그). 두 경우 모두, 사용자 에이전트는 선택한 각 축의 최종 스냅 대상에 대해, 스크롤러가 스크롤 동작이 의도한 스크롤 위치에 도달한 후 스냅하게 됩니다.

• 첫 번째 경우(애니메이션)는 스크롤 애니메이션의 목표 스크롤 오프셋이 의도된 위치입니다.

• 두 번째 경우(직접 입력)는 사용자의 입력에 따라 결정된 현재 스크롤 오프셋이 의도된 위치입니다.

scrollsnapchanging 이벤트는 스크롤 동작으로 스냅 타겟이 변경될 것임을 웹 페이지에 가능한 한 빨리 알리기 위한 것입니다. 사용자 에이전트는 scrollsnapchanging 발생 여부를, 스크롤 동작이 의도된 위치에 도달했을 때 어떤 eventual snap target에 스냅될지에 따라 판단해야 합니다.

참고: scrollsnapchanging 이벤트는 미래의 스냅에 대한 힌트를 주므로, 해당 이벤트가 암시하는 스냅이 실제로 이루어지지 않을 수도 있습니다. 이후의 스크롤 입력에 따라 스냅 컨테이너의 스크롤 위치가 변경되어 다른 eventual snap target으로 이어질 수 있기 때문입니다.

scrollsnapchanging 이벤트는 scroll 이벤트보다 먼저 발생합니다.

각 Document 는 대기 중인 scrollsnapchanging 이벤트 타겟 목록을 가지며, 처음에는 비어 있습니다.

각 스냅 컨테이너에는 block 축과 inline 축에 대해 각각 scrollsnapchanging block-axis target과 scrollsnapchanging inline-axis target이 있으며, 해당 축에서 스냅하지 않으면 null이고, 그렇지 않으면 스냅 타겟입니다.

scrollsnapchanging 타겟 업데이트를 요청받으면, 스냅 컨테이너 snapcontainer와 스냅 타겟 newBlockTarget, 스냅 타겟 newInlineTarget이 주어질 때, 다음 단계를 실행하세요:

1. doc를 snapcontainer와 연결된 Document로 설정합니다.

2. blockTarget을 scrollsnapchanging block-axis target으로 설정합니다. snapcontainer에 연결된 값입니다.

3. inlineTarget을 scrollsnapchanging inline-axis target으로 설정합니다. snapcontainer에 연결된 값입니다.

4. newBlockTarget이 스냅 타겟으로서 blockTarget과 다르다면:

   1. snapcontainer에 연결된 scrollsnapchanging block-axis target을 newBlockTarget으로 설정합니다.

   2. snapcontainer가 doc의 대기 중인 scrollsnapchanging 이벤트 타겟 목록에 이미 없다면,

      1. snapcontainer를 doc의 대기 중인 scrollsnapchanging 이벤트 타겟 목록에 추가합니다.

5. newInlineTarget이 스냅 타겟으로서 inlineTarget과 다르다면:

   1. snapcontainer에 연결된 scrollsnapchanging inline-axis target을 newInlineTarget으로 설정합니다.

   2. snapcontainer가 doc의 대기 중인 scrollsnapchanging 이벤트 타겟 목록에 이미 없다면,

      1. snapcontainer를 doc의 대기 중인 scrollsnapchanging 이벤트 타겟 목록에 추가합니다.

대기 중인 scrollsnapchanging 이벤트 디스패치를 요청받으면, Document doc에 대해 다음 단계를 수행하세요:

1. doc의 대기 중인 scrollsnapchanging 이벤트 타겟 목록의 각 target에 대해:

   1. blockTarget과 inlineTarget을 처음에 null로 설정합니다.

   2. scrollsnapchanging block-axis target이 target에 연결된 값이 가상 요소라면, blockTarget을 해당 scrollsnapchanging block-axis target의 소유 요소로 설정합니다.

   3. 그렇지 않으면, blockTarget을 해당 scrollsnapchanging block-axis target 값으로 설정합니다.

   4. scrollsnapchanging inline-axis target이 target에 연결된 값이 가상 요소라면, inlineTarget을 해당 scrollsnapchanging inline-axis target의 소유 요소로 설정합니다.

   5. 그렇지 않으면, inlineTarget을 해당 scrollsnapchanging inline-axis target 값으로 설정합니다.

   6. SnapEvent snapevent를 scrollsnapchanging 이름으로 target에 발생시키고, snapevent의 snapTargetBlock 과 snapTargetInline 속성을 각각 blockTarget, inlineTarget으로 설정합니다.

2. doc의 대기 중인 scrollsnapchanging 이벤트 타겟 목록을 비웁니다.

5.1.4. 레이아웃 변경에 따른 스냅 이벤트

1. newBlockTarget을 스냅 타겟으로 설정합니다. snapcontainer가 block 축에서 스냅된 요소이거나, 어떤 요소에도 스냅되지 않았다면 null입니다.

2. newInlineTarget을 스냅 타겟으로 설정합니다. snapcontainer가 inline 축에서 스냅된 요소 또는 가상 요소이거나, 해당되지 않으면 null입니다.

3. scrollsnapchanging 타겟 업데이트 단계를 newBlockTarget과 newInlineTarget을 인자로 실행하세요.

4. scrollsnapchange 타겟 업데이트 단계를 snapcontainer에 대해 실행하세요.

5.2. SnapEvent 인터페이스

dictionary SnapEventInit : EventInit {
  Node? snapTargetBlock;
  Node? snapTargetInline;
};

[Exposed=Window]
interface SnapEvent : Event {
  constructor(DOMString type, optional SnapEventInit eventInitDict = {});
  readonly attribute Node? snapTargetBlock;
  readonly attribute Node? snapTargetInline;
};

snapTargetBlock, 타입 Node, 읽기 전용, null 허용

스냅 이벤트가 연관된 block 축에서 스냅 컨테이너가 스냅된 요소입니다. 해당 스냅 위치에서. 스냅 타겟 이 가상 요소였다면, 이 값은 해당 가상 요소의 소유 요소입니다.

snapTargetInline, 타입 Node, 읽기 전용, null 허용

스냅 이벤트가 연관된 inline 축에서 스냅 컨테이너가 스냅된 요소입니다. 해당 스냅 위치에서. 스냅 타겟 이 가상 요소였다면, 이 값은 해당 가상 요소의 소유 요소입니다.

scrollsnapchange 이벤트에서는 스냅 위치는 스크롤 스냅이 완료된 후 컨테이너가 이미 실현한 위치입니다. scrollsnapchanging 이벤트에서는 스크롤 동작이 종료되면 컨테이너가 스냅될 위치입니다.

SnapEvent는 이벤트 타겟이 Document인 경우를 제외하고 버블링되지 않습니다. SnapEvent는 취소할 수 없습니다.

부록 A: 이벤트 핸들러

이 섹션은 HTML 이벤트 핸들러 명세로 이동되어야 합니다.

요소, Document 객체 및 Window 객체의 이벤트 핸들러

다음은 모든 HTML 요소가 이벤트 핸들러 콘텐츠 속성 및 이벤트 핸들러 IDL 속성으로 지원해야 하며, 모든 Window 객체와 Document 객체에서 이벤트 핸들러 IDL 속성으로 지원해야 하는 추가 이벤트 핸들러와 해당 이벤트 핸들러 이벤트 타입입니다:

GlobalEventHandlers 인터페이스 믹스인 확장

이 명세는 HTML의 GlobalEventHandlers 인터페이스 믹스인을 확장하여, 이벤트 핸들러 IDL 속성을 SnapEvent에 대해 추가합니다. 자세한 내용은 요소, Document 객체 및 Window 객체의 이벤트 핸들러를 참조하세요.

IDL 정의

partial interface mixin GlobalEventHandlers {
  attribute EventHandler onsnapchanged;
  attribute EventHandler onsnapchanging;
};

6. 프라이버시 고려사항

이 명세의 기능은 알려진 프라이버시 관련 영향이 없습니다.

7. 보안 고려사항

이 명세의 기능은 알려진 보안 관련 영향이 없습니다.