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

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

Chrome 81부터는 이벤트 리스너를 추가하여 있습니다.

Adam Argyle

Kaan Alsan

Yi Gu

CSS 스크롤 스냅 이를 통해 웹 개발자는 스크롤 스냅 위치를 스크롤할 수 있습니다. 현재 구현 방식의 한 가지 단점은 표시 영역이 변경되는 경우와 같이 레이아웃이 변경될 때 스크롤 맞추기가 제대로 작동하지 않습니다. 회전할 수 있습니다. 이 단점은 Chrome 81에서 해결되었습니다.

상호 운용성

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

Chrome은 현재 레이아웃 후에 스크롤 스냅을 구현하는 유일한 브라우저입니다. 있습니다. Firefox에는 티켓 열기 Safari에서도 공개되어 있으며 녹화 후 다시 촬영하기 위한 티켓을 제공합니다. 콘텐츠가 변경됩니다. 지금은 이 동작을 시뮬레이션할 수 있습니다. 다음 코드를 이벤트 리스너에 추가하여 맞추기를 강제로 실행합니다. javascript scroller.scrollBy(0,0); 그러나 스크롤러가 동일한 요소가 포함됩니다.

배경

CSS 스크롤 스냅

CSS 스크롤 스냅 기능을 사용하면 웹 개발자가 스크롤 스냅 위치를 선언하여 스크롤 환경을 구현합니다. 이러한 위치 스크롤 가능한 콘텐츠가 컨테이너에 올바르게 정렬되도록 하여 부정확한 스크롤 문제를 극복할 수 있습니다. 즉, 스크롤 스냅은 다음과 같습니다.

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

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

CSS 스크롤 스냅의 예. 종료일 이미지의 가로 가운데 스크롤이 가로 가운데 정렬됨 지정할 수 있습니다

단점

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

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

스크롤 스냅을 사용하면 사용자가 콘텐츠를 쉽게 탐색할 수 있지만 콘텐츠와 레이아웃의 변화에 적응하지 못하므로 이로 인해 제공합니다 다음 예에 나와 있습니다. 위에서 사용자는 창의 크기를 조정할 때마다 스크롤 위치를 이전에 맞춰진 요소를 찾습니다. 레이아웃을 유발하는 몇 가지 일반적인 시나리오 변경사항은 다음과 같습니다.

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

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

이 문제의 일반적인 해결 방법은 다음을 통해 프로그래매틱 스크롤을 실행하는 리스너를 추가하는 것입니다. 언급된 레이아웃 중 하나가 있을 때마다 맞추기를 강제로 실행하는 JavaScript 일어날 수 있습니다 이 해결 방법은 사용자가 이전과 동일한 콘텐츠로 다시 돌아갈 수 있습니다. 추가 취급이 있는 경우 JavaScript는 이 CSS 기능의 목적을 거의 무효화하는 것으로 보입니다.

Chrome 81에서 레이아웃 변경 후 다시 맞추기를 기본적으로 지원합니다.

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

스냅 위치가 사라졌습니다.

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

Chrome 80에서는 기기를 회전해도 맞추기 위치가 유지되지 않습니다. NOPE 슬라이드로 스크롤하고 기기 방향을 변경한 후 세로에서 가로로 전환될 때 빈 화면이 표시되며 이는 스크롤 스냅 위치가 손실되었습니다.

맞추기 위치 유지

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

Chrome 81에서는 기기를 회전하면 맞추기 위치가 유지됩니다. 이 슬라이드는 기기 방향이 여러 번 변경되더라도 NOPE가 계속 뷰에 표시됨

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

예: 고정 스크롤바

'레이아웃 변경 후 스냅'을 사용하면 개발자가 CSS 행:

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

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

자세한 내용이 궁금하신가요? 다음 데모 채팅을 참조하세요. UI를 사용합니다.

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

새 메시지를 추가하면 메시지 하단에 Chrome 81

향후 작업

모든 재스냅 스크롤 효과는 현재 즉시 적용됩니다. 잠재적인 후속 조치는 부드러운 스크롤로 재스냅하기 지원 효과가 있습니다. 사양 문제를 참고하세요. 참조하세요.

의견

여러분의 의견은 레이아웃 변경 후 다시 맞추기를 개선하는 데 매우 중요합니다. 계속 진행하세요. 직접 사용해 보고 Chromium 엔지니어에게 당신이 무엇을 할 수 있는지 생각해야 합니다.