이 페이지는 Cloud Translation API를 통해 번역되었습니다.

레이아웃 변경 후 스크롤 맞추기

Chrome 81부터는 이벤트 리스너를 추가하지 않아도 강제로 재조정할 수 있습니다.

Adam Argyle

Kaan Alsan

Yi Gu

CSS 스크롤 스냅을 사용하면 웹 개발자가 스크롤 스냅 위치를 선언하여 잘 제어되는 스크롤 환경을 만들 수 있습니다. 현재 구현의 한 가지 단점은 레이아웃이 변경될 때(예: 표시 영역의 크기가 조절되거나 기기가 회전할 때) 스크롤 맞추기가 제대로 작동하지 않는다는 것입니다. 이 단점은 Chrome 81에서 해결되었습니다.

상호 운용성

대부분의 브라우저에서는 CSS 스크롤 스냅을 기본적으로 지원합니다. 자세한 내용은 CSS 스크롤 스냅을 사용할 수 있나요?를 참고하세요.

Chrome은 현재 레이아웃 변경 후 스크롤 스냅을 구현하는 유일한 브라우저입니다. Firefox에는 이 구현을 위한 티켓이 있고 Safari의 경우 스크롤러의 콘텐츠가 변경된 후 다시 스냅할 수 있는 공개 티켓도 있습니다. 지금은 다음 코드를 이벤트 리스너에 추가하여 맞추기를 강제로 실행하여 이 동작을 시뮬레이션할 수 있습니다. javascript scroller.scrollBy(0,0); 하지만 이렇게 해도 스크롤러가 동일한 요소에 다시 맞춰지는 것은 아닙니다.

배경

CSS 스크롤 스냅

CSS 스크롤 스냅 기능을 사용하면 웹 개발자가 스크롤 스냅 위치를 선언하여 잘 제어되는 스크롤 환경을 만들 수 있습니다. 이러한 위치를 통해 스크롤 가능한 콘텐츠가 컨테이너와 올바르게 정렬되어 부정확한 스크롤의 문제를 해결할 수 있습니다. 즉, 스크롤 맞추기는 다음과 같습니다.

스크롤할 때 어색한 스크롤 위치를 방지합니다.
콘텐츠를 페이징하는 효과를 만듭니다.

페이지로 나눈 기사와 이미지 캐러셀은 스크롤 스냅의 두 가지 일반적인 사용 사례입니다.

CSS 스크롤 스냅의 예 스크롤이 끝날 때 이미지의 가로 가운데가 스크롤 컨테이너의 가로 가운데에 정렬됩니다.

단점

창 크기를 조절하면 맞추기 위치가 손실됩니다.

스크롤 맞추기를 사용하면 사용자가 콘텐츠를 쉽게 탐색할 수 있지만 콘텐츠와 레이아웃의 변경사항에 적응할 수 없으면 잠재적인 이점 중 일부가 차단됩니다. 위 예와 같이 사용자는 이전에 맞춰진 요소를 찾기 위해 창의 크기를 조절할 때마다 스크롤 위치를 다시 조정해야 합니다. 레이아웃 변경을 일으키는 몇 가지 일반적인 시나리오는 다음과 같습니다.

창 크기 조절
기기 회전
DevTools 열기

처음 두 가지 시나리오에서는 CSS Scroll Snap이 사용자에게 덜 매력적이며 세 번째는 디버깅할 때 개발자에게 악몽입니다. 개발자는 콘텐츠 추가, 삭제 또는 이동과 같은 작업을 지원하는 동적 환경을 만들 때 이러한 단점도 고려해야 합니다.

이 문제를 해결하는 일반적인 방법은 자바스크립트를 통해 프로그래매틱 스크롤을 실행하는 리스너를 추가하여 앞서 언급한 레이아웃 변경이 발생할 때마다 강제로 맞추기를 실행하는 것입니다. 이 해결 방법은 스크롤러가 이전과 동일한 콘텐츠로 다시 돌아갈 것으로 사용자가 예상하는 경우 비효율적일 수 있습니다. JavaScript로 추가로 처리하면 이 CSS 기능의 목적을 거의 상실하는 것으로 보입니다.

Chrome 81에서 레이아웃 변경 후 다시 맞추기 지원 기본 제공

Chrome 81에서는 언급된 단점이 더 이상 존재하지 않습니다. 즉, 레이아웃을 변경한 후에도 스크롤러가 맞춰진 상태로 유지됩니다. 레이아웃을 변경한 후 스크롤 위치를 재평가하고 필요한 경우 가장 가까운 맞추기 위치에 다시 맞춥니다. 이전에 스크롤러가 레이아웃 변경 후에도 여전히 존재하는 요소에 맞춰졌다면 스크롤러는 다시 스크롤하려고 시도합니다. 다음 예에서 레이아웃이 변경되면 어떻게 되는지 주의하세요.

스냅 위치 상실

기기를 회전해도 Chrome 80에서 맞추기 위치가 유지되지 않습니다. NOPE라고 표시된 슬라이드로 스크롤하고 기기 방향을 세로에서 가로로 변경하면 빈 화면이 표시됩니다. 이는 스크롤 스냅 위치가 사라졌음을 나타냅니다.

맞추기 위치 유지

기기를 회전해도 Chrome 81에서 맞추기 위치가 유지됩니다. NOPE이라고 표시된 슬라이드는 기기 방향이 여러 번 변경되더라도 뷰에 남아 있습니다.

자세한 내용은 레이아웃 변경 후 다시 맞추기 사양을 참고하세요.

예: 고정 스크롤바

'레이아웃 변경 후 맞추기'를 사용하면 개발자는 몇 줄의 CSS로 고정 스크롤바를 구현할 수 있습니다.

.container {
  scroll-snap-type: y proximity;
}

.container::after {
  scroll-snap-align: end;
  display: block;
}

자세한 내용이 궁금하신가요? 시각 자료는 다음 데모 채팅 UI를 참고하세요.

새 메시지를 추가하면 다시 맞추기가 트리거되어 Chrome 81의 하단에 고정됩니다.

향후 작업

모든 재맞추기 스크롤 효과는 현재 즉각적입니다. 부드러운 스크롤 효과를 사용하여 다시 맞추기를 지원할 수 있습니다. 자세한 내용은 사양 문제를 참고하세요.

의견

여러분의 의견은 레이아웃 변경 후 다시 맞추기를 개선하는 데 매우 소중하므로 계속 사용해 보고 Chromium 엔지니어에게 의견을 전달하세요.