CSS scroll-behavior 속성을 사용하면 스크롤 동작을 변경할 수 있습니다.
예시
다음 예는 CSS scroll-behavior 속성을 보여줍니다.
<!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> 출력
이것은 다음과 같은 결과를 생성합니다 -
예시
<!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> 출력
이것은 다음과 같은 결과를 생성합니다 -
