scroll-behavior

 

scroll-behavior

scroll-behavior CSS 속성은 탐색 또는 CSSOM 스크롤링 API로 스크롤링이 트리거될 때 스크롤링 상자의 동작을 설정합니다.

 

사용자가 수행하는 스크롤과 같은 다른 스크롤은 이 속성에 영향을 받지 않습니다. 이 속성이 루트 요소에 지정된 경우 뷰포트에 적용됩니다. body 요소에서 지정된 이 속성은 뷰포트로 전파되지 않습니다.

 

사용자 에이전트는 이 속성을 무시할 수 있습니다.

 

/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;

/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: revert;
scroll-behavior: revert-layer;
scroll-behavior: unset;

 

scroll-behavior 속성은 아래 나열된 키워드 값 중 하나로 지정됩니다.

 

auto

스크롤 박스가 즉시 스크롤됩니다.

 

smooth

스크롤박스는 사용자 에이전트에서 정의한 이징 함수와 시간 간격을 사용하여 부드럽게 스크롤됩니다. 사용자 에이전트는 가능한 경우 플랫폼 규칙을 따라야 합니다.

 

<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<div class="scroll-container">
  <div class="scroll-page" id="page-1">1</div>
  <div class="scroll-page" id="page-2">2</div>
  <div class="scroll-page" id="page-3">3</div>
</div>

 

a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav,
.scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
.scroll-container {
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
.scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}