Snap 이벤트 스크롤

Chrome 129부터 JavaScript의 scrollSnapChange 및 scrollSnapChanging 이벤트를 사용할 수 있습니다. 내장된 스냅 이벤트를 구현하면 이전에 보이지 않았던 스냅 상태가 적시에 실행 가능하고 항상 정확해집니다. 이러한 이벤트가 없어 불편을 겪으신 것은 아닙니다.

scrollSnapChange 이전에는 교차 관찰자를 사용하여 스크롤 포트를 가로지르는 요소를 찾을 수 있었지만, 스냅된 요소를 확인하는 것은 몇 가지 상황으로 제한되었습니다. 예를 들어 맞추기 항목이 스크롤 포트를 채우는지 또는 스크롤 포트의 대부분을 채우는지 감지할 수 있습니다. 이렇게 하려면 스크롤 영역의 교차 요소를 관찰한 다음 스크롤 영역의 대부분을 소비하는 항목을 기반으로 이 항목이 맞추기 타겟이라고 가정하고 scrollend를 기다렸다가 스냅된 항목 (맞추기 타겟)에 따라 작업을 수행합니다.

하지만 scrollSnapChanging 이전에는 맞추기 대상이 언제 변경되는지 또는 다음으로 변경되는지 (예: 스크롤 플링)를 알 수 없었습니다.

새로운 이벤트를 통해 이 정보를 빠르고 쉽게 확인할 수 있게 되었습니다. 이를 통해 스크롤 스냅 상호작용을 통해 기존 기능을 뛰어넘을 수 있으며, 스크롤 스냅 관계를 오케스트레이션하고 새로운 UI 피드백 시나리오를 제공할 수 있습니다.

<ph type="x-smartling-placeholder">

scrollSnapChange

이 이벤트는 스크롤 동작으로 인해 새로운 맞추기 타겟이 다음 순서로 놓인 경우에만 실행됩니다.

1. 두루마리가 휴식을 취한 후
2. scrollend 이전

이 이벤트는 scrollend 직전, 스크롤이 완료될 때, 그리고 새 맞추기 대상이 놓인 경우에만 실행됩니다. 이렇게 하면 스크롤 동작이 완료되면 이벤트가 지연되거나 적시의 느낌을 줍니다.

scroller.addEventListener('scrollsnapchange', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchange = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

이벤트는 이벤트 객체에서 맞춰진 항목을 snapTargetBlock 및 snapTargetInline로 노출합니다. 스크롤러가 가로 전용인 경우 snapTargetBlock 속성은 null입니다. 속성의 값은 요소 노드가 됩니다.

스크롤SnapChange에 대한 고유한 세부정보

사용자가 동작을 놓을 때까지 실행되지 않음

여전히 화면에 손가락이나 트랙패드의 손가락은 사용자의 동작이 완료되지 않았음을 나타냅니다. 즉, 스크롤이 종료되지 않았음을 의미합니다. 즉, 맞추기 대상이 아직 변경되지 않았으며 완전한 사용자 동작이 대기 중임을 의미합니다.

맞추기 대상이 변경되지 않은 경우 실행되지 않습니다.

이 이벤트는 맞추기 변경용이며, 맞추기 대상이 변경되지 않으면 사용자가 스크롤러와 상호작용하더라도 이벤트가 실행되지 않습니다. 하지만 사용자는 실제로 스크롤했으므로 스크롤 완료 시 scrollend 이벤트가 계속 발생합니다.

scrollSnapChanging

이 이벤트는 브라우저에서 스크롤 동작에 새로운 맞추기 타겟이 있거나 생성될 것이라고 판단하는 즉시 실행됩니다. 스크롤하는 동안 빠르게 실행됩니다.

scroller.addEventListener('scrollsnapchanging', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchanging = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

이벤트는 이벤트 객체에서 맞춰진 항목을 snapTargetBlock 및 snapTargetInline로 노출합니다. 스크롤러가 세로형인 경우 snapTargetInline 속성은 null입니다. 속성의 값은 요소 노드가 됩니다.

스크롤 스냅 변경의 고유한 세부정보

초기에, 스크롤 동작 중에 자주 실행됨

전체 사용자 스크롤 동작을 기다리는 scrollSnapChange와 달리 이 이벤트는 사용자가 손가락으로 스크롤하거나 트랙패드를 사용하는 동안 빠르게 실행됩니다. 사용자가 손가락을 떼지 않고 천천히 스크롤한다고 가정해 보겠습니다. 사용자가 여러 개의 가능한 스냅 대상 위로 이동하는 한 scrollSnapChanging는 동작 중에 여러 번 실행됩니다. 사용자가 스크롤할 때마다, 브라우저에서 해제 시에 새 맞추기 타겟에 고정되는 것으로 판단한 경우 어떤 요소가 있는지 알려주기 위해 이벤트가 실행됩니다.

새 맞추기 대상으로 이동하는 중에 모든 맞추기 대상을 실행하지 않음

또한 사용자가 한 번에 여러 스냅 대상을 포괄하는 스크롤 던지기 동작을 수행하는 플링을 고려하세요. 이 이벤트는 휴식할 타겟에서 한 번 실행됩니다. 따라서 최대한 빨리 맞추기 대상을 제공하는 것이 적극적이지만 낭비는 아닙니다.

사용 사례 및 예

이러한 이벤트는 많은 새로운 사용 사례를 가능하게 하는 동시에 현재 패턴을 훨씬 쉽게 구현할 수 있게 해줍니다. 가장 좋은 예로 맞추기 트리거 애니메이션을 사용하는 것이 있습니다. 맞추기 항목, 맞추기 항목의 하위 요소 또는 관련 정보(맞추기 대상일 때)를 상황에 맞게 표시합니다.

다음 패턴은 즉시 생산성을 발휘하는 데 도움이 되는 몇 가지 사용 사례를 보여줍니다.

사용 후기 강조 표시

이 예에서는 스냅된 후기를 홍보하거나 시각적으로 강조합니다.

scroller.onscrollsnapchange = event => {
  scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
  event.snapTargetInline.classList.add('snapped')
}

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

맞춰진 항목의 설명 표시

이 예는 맞춰진 항목의 설명을 보여줍니다. 두 이벤트가 모두 이 데모에 포함되어 있으므로 scrollSnapChange와 scrollSnapChanging의 타이밍 및 사용자 환경 차이를 확인할 수 있습니다.

맞춰진 프레젠테이션 슬라이드의 하위 요소를 한 번 애니메이션 처리

이 예에서는 새 슬라이드가 놓이고 놓는 시점을 알기 때문에 콘텐츠에 애니메이션을 한 번 적용하는 것이 좋습니다.

document.addEventListener('scrollsnapchange', event => {
  event.snapTargetBlock.classList.add('seen')
})

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

스크롤러에서 x 및 y 모두에 맞추기

스크롤 스냅은 가로 및 세로 스크롤을 허용하는 스크롤러에서 작동합니다. 이 데모에서는 그리드를 스크롤할 때 scrollSnapChanging 및 scrollSnapChange 타겟을 모두 보여줍니다. 이 데모는 브라우저가 맞추는 요소가 어떻게 생각하시는지와 일치하지 않을 수 있음을 보여줍니다.

연결된 스크롤러 2개

이 데모에는 두 개의 스크롤 스냅 컨테이너가 있습니다. 하나는 상위 수준의 링크 목록이고 다른 하나는 실제 페이징된 콘텐츠입니다. 새 scrollSnapChanging 이벤트를 사용하면 이러한 스냅 상태를 양방향으로 간단하게 연결하여 항상 동기화되도록 할 수 있습니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

OKLCH 색상 선택 도구

이 데모에는 3개의 스크롤러가 있으며, 각 스크롤러는 OKLCH의 다른 색상 채널을 나타냅니다. 맞춰진 항목은 관련 라디오 그룹과 동기화되며 입력을 래핑하는 양식에서 데이터를 가져올 수 있습니다. 마우스 또는 터치 사용자의 경우 원하는 값으로 스크롤할 수 있습니다. 키보드 사용자는 Tab 키를 눌러 화살표 키를 사용할 수 있습니다. 스크린 리더에는 한 가지 형태일 뿐입니다.

환상적인 애니메이션 허브

이 데모에서는 scrollsnapchange를 사용하여 맞추기 트리거 전환으로 스크롤 맞추기 환경을 점진적으로 개선합니다.

다음 JavaScript를 사용하여 이벤트 지원을 확인합니다.

if ('onscrollsnapchange' in window) {
  // ok to use snap change
}

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

스크롤 가능한 눈금자 입력

이 데모에서는 숫자 입력의 길이를 선택하는 대체 방법으로 스크롤 가능한 눈금자를 제공합니다. 숫자 입력에 직접 값을 입력하거나 크기로 스크롤합니다. 변경 이벤트는 사용자 동작 중에 선택을 지우는 데 사용되고, 변경 이벤트는 상태를 업데이트하고 사용자의 선택을 강화하는 데 사용됩니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

커버 흐름

이 데모는 유명한 macOS 커버 흐름의 Bramus Van Damme의 뛰어난 스크롤 기반 애니메이션 재생성을 기반으로 합니다 (동영상 튜토리얼도 제공). 특히 scrollSnapChanging는 앨범 제목을 숨기는 데 사용되고 scrollSnapChange는 제목을 표시하는 데 사용됩니다. 이러한 이벤트는 기존 타이틀을 숨김 처리하면서 새로운 타이틀을 천천히 제시하는 데 도움이 됩니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

창의력을 펼칠 수 있는 다양한 아이디어

이제 맞춰야 할 요소와 현재 스냅되는 요소를 쉽게 알 수 있으므로 새로운 가능성이 많이 있습니다. 다음은 창의성을 자극하고 추가 사용 사례를 제공하는 데 도움이 되는 아이디어 목록입니다.

• 지연 로드 트리거(Snapchange 트리거 렌더링 또는 데이터 가져오기라고 함)
• 더 큰 이미지에 연결된 필름 스트립 썸네일
• 맞춰진 동영상 썸네일의 동영상 트레일러 재생/일시중지를 전환합니다.
• 애널리틱스 추적
• 스크롤리텔링
• 휠 오브 포춘 UI/UX
• 맞추기 타겟에 고정된 도움말이 표시됩니다.
• 탭하여 스냅하기
• 스와이프하여 확인하기
• 스냅 사운드
• 스와이프 UI
• 스와이프할 수 있는 탭 또는 캐러셀

추가 연구

Chrome팀은 개발자 여러분이 이러한 새로운 API를 사용하여 무엇을 빌드하는지 기쁜 마음으로 기쁘게 생각하며, 스크롤 가능한 환경을 간소화하는 데 도움이 되기를 바랍니다.

리소스:

• CSS 사양
• 스크롤 스냅 설명
• CodePen 컬렉션