CSS 속성 scroll-initial-target는 컨테이너가 렌더링되는 즉시 특정 하위 요소를 스크롤 컨테이너의 표시 영역으로 가져오는 선언적 CSS 전용 방법을 제공합니다. 이전에는 개발자가 JavaScript (Element.scrollIntoView()) 또는 URL 프래그먼트 식별자 (#item-id)를 사용했는데, 둘 다 제한사항이 있고 구현하기가 까다롭습니다.
구현 방법
이를 성공적으로 구현하려면 다음 단계를 따르세요.
- 스크롤 컨테이너 확인: 타겟 요소는 스크롤 컨테이너 (스크롤을 허용하는 오버플로가 있는 요소, 예:
overflow: auto) 내에 있어야 합니다. 루트<html>요소를 비롯한 모든 상위 요소가 될 수 있습니다. - 항목 타겟팅: 표시하려는 특정 하위 요소에
scroll-initial-target: nearest를 적용합니다.
예시 코드: 세로 미디어 피드
이 예에서는 피드가 목록의 맨 위가 아닌 특정 '추천' 항목으로 스크롤되어 시작됩니다.
/**
* TARGET: The item that should be visible on initial load.
*/
.item.target {
scroll-initial-target: nearest;
}
전략적 구현 및 권장사항
- 권장사항: 현재 날짜에 시작하는 캘린더나 특정 이미지에서 시작하는 갤러리와 같은 '중간 시작' 환경에는
scroll-initial-target를 사용합니다. - 접근성 포커스와 혼동하지 마세요. 이 속성은 시각적 표시 영역만 이동하며 키보드 포커스는 이동하지 않습니다. 타겟이 키보드 사용자의 시작점이 되도록 하려면
element.focus()를 수동으로 관리해야 합니다. - 로드 시 부드러운 '스크롤' 애니메이션이 필요한 경우 이 속성을 사용하지 마세요. 이 속성은 불연속적이며 레이아웃 단계에서 위치를 즉시 설정합니다.
- 동일한 스크롤 가능한 컨테이너 내의 여러 요소에
scroll-initial-target를 설정하지 마세요. 여러 요소가scroll-initial-target: nearest를 지정하는 경우 브라우저는 DOM 트리 순서에서 먼저 표시되는 요소를 선택합니다. - 미디어의 크기를 제공합니다. 스크롤 위치는 초기 레이아웃 중에 계산되므로 미디어가 로드된 후 타겟이 이동하지 않도록 이미지 또는 동영상에
aspect-ratio또는 고정된height/width가 있어야 합니다. - 우선순위 계층 구조를 고려하세요. URL 프래그먼트 (예:
example.com/#top)와 컨테이너 수준scroll-start속성은 모두scroll-initial-target보다 우선 적용됩니다.
대체 전략
아직 API를 지원하지 않는 브라우저의 경우 JavaScript 대체 기능을 사용합니다. DOMContentLoaded 이벤트를 사용하여 HTML 파싱이 완료되는 즉시 브라우저가 요소를 뷰로 스크롤하도록 하여 모든 이미지와 리소스가 로드될 때까지 기다리는 것보다 더 빠른 환경을 제공합니다. 또는 스크립트를 <body> 요소 끝에 배치하는 것도 가능하며 이벤트 리스너가 필요하지 않습니다.
/**
* Progressive Enhancement Fallback
*/
document.addEventListener("DOMContentLoaded", () => {
// Check for native CSS support
if (!CSS.supports("scroll-initial-target", "nearest")) {
const feedTarget = document.querySelector(".item.target");
if (feedTarget) {
// 'block: center' ensures the featured media is centered in view
feedTarget.scrollIntoView({ behavior: "instant", block: "center" });
}
}
});