CSS의 scroll-behavior 속성을 활용하면 자바스크립트 없이 순수 CSS만으로 스크롤 동작 방식을 손쉽게 변경할 수 있습니다. 이 속성을 사용하면 앵커 링크 클릭 시 화면이 즉시 이동하는 대신, 자연스러운 애니메이션 효과와 함께 대상 위치로 전환됩니다.
scroll-behavior 속성의 주요 값
- auto — 기본값으로, 스크롤이 지정된 위치로 즉시 이동합니다.
- smooth — 부드러운 애니메이션 효과와 함께 스크롤이 이동하여 사용자 경험을 향상시킵니다.
예제 1: smooth 값 적용하기
다음 예제는 scroll-behavior 속성에 smooth 값을 적용하여 부드러운 스크롤을 구현한 사례입니다.
<!DOCTYPE html>
<html>
<head>
<style>
html {
line-height: 200px;
margin: 30px;
text-align: center;
vertical-align: middle;
}
#parent {
scroll-behavior: smooth;
width: 250px;
height: 200px;
overflow-y: scroll
}
.pink {
height: 200px;
box-shadow: inset 0 0 50px deeppink;
}
.blue {
height: 200px;
box-shadow: inset 0 0 50px darkblue;
}
</style>
</head>
<body>
<div id="parent">
<div class="blue" id="first"><a href=#last>Last</a></div>
<div class="pink"></div>
<div class="blue"></div>
<div class="pink" id="last"><a href=#first>First</a></div>
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
'Last' 또는 'First' 링크를 클릭하면 컨테이너가 한 번에 건너뛰지 않고 천천히, 부드럽게 목표 지점까지 스크롤되는 것을 확인할 수 있습니다.
예제 2: auto 값 적용하기
이번에는 scroll-behavior 속성을 auto로 설정한 예제입니다. 원형 테두리와 overflow: hidden을 함께 사용해 스타일링 차이도 함께 살펴볼 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
html {
line-height: 150px;
margin: 30px;
text-align: center;
vertical-align: middle;
}
#parent {
scroll-behavior: auto;
width: 150px;
height: 150px;
overflow: hidden;
border: 22px groove tomato;
border-radius: 50%;
}
.green {
height: 150px;
box-shadow: inset 0 0 50px darkgreen;
}
.blue {
height: 150px;
box-shadow: inset 0 0 50px darkblue;
}
</style>
</head>
<body>
<div id="parent">
<div class="blue" id="first"><a href=#last>Last</a></div>
<div class="green"></div>
<div class="blue"></div>
<div class="green" id="last"><a href=#first>First</a></div>
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
auto 값이 적용된 경우 링크를 클릭하면 애니메이션 없이 해당 위치로 즉시 이동합니다. 두 예제를 비교해 보면 smooth 값이 페이지 내 탐색 시 훨씬 자연스러운 사용자 경험을 제공한다는 점을 알 수 있습니다.