scroll-behavior

scroll-behavior 유틸리티는 요소 안에서 스크롤이 일어날 때 부드럽게 움직일지, 아니면 즉시 점프할지를 결정해 줘요. 부드러운 스크롤을 만들고 싶을 때 유용하답니다.

출처: 문서

본문

클래스	CSS
`scroll-auto`	`scroll-behavior: auto;`
`scroll-smooth`	`scroll-behavior: smooth;`

부드러운 스크롤 사용하기 (Using smooth scrolling)

scroll-smooth 유틸리티를 사용하면 요소 안에서 부드러운 스크롤을 활성화할 수 있어요:

<html class="scroll-smooth">
  <!-- ... -->
</html>

scroll-behavior을 설정하는 것은 브라우저가 직접 트리거하는 스크롤 이벤트에만 영향을 줘요.

일반 스크롤 사용하기 (Using normal scrolling)

scroll-auto 유틸리티를 사용하면 스크롤에 대한 기본 브라우저 동작으로 되돌릴 수 있어요:

<html class="scroll-smooth md:scroll-auto">
  <!-- ... -->
</html>

변형(variant) 사용법에 대해 더 알고 싶다면 variants 문서를 살펴보세요.