AAtomic CSS

scroll-behavior

페이지나 스크롤 컨테이너의 스크롤 동작 방식을 제어합니다. sbs를 적용하면 앵커 링크 이동 시 부드러운 스크롤 애니메이션이 활성화됩니다.

클래스 목록

클래스CSS설명
sbascroll-behavior: auto기본값. 즉시 점프 이동
sbsscroll-behavior: smooth부드러운 스크롤 애니메이션

클래스별 상세

sbascroll-behavior: auto

브라우저 기본값입니다. 앵커 링크 이동이나 scrollTo() 호출 시 즉시 해당 위치로 점프합니다. 애니메이션 없이 빠르게 이동해야 할 때 사용합니다.

<!-- 기본 스크롤 동작 (즉시 이동) -->
<div class="sba oh h20rem">
  <div id="section-a">섹션 A</div>
  <div id="section-b">섹션 B</div>
</div>

sbsscroll-behavior: smooth

앵커 링크 클릭이나 scrollTo() 호출 시 부드러운 스크롤 애니메이션이 적용됩니다. 주로 html 태그나 스크롤 컨테이너에 적용합니다.

<!-- 페이지 전체에 smooth scroll 적용 -->
<html class="sbs">
  <body>
    <a href="#section1">섹션 1로 이동</a>
    <a href="#section2">섹션 2로 이동</a>
    ...
    <div id="section1">섹션 1</div>
    <div id="section2">섹션 2</div>
  </body>
</html>

<!-- 특정 스크롤 컨테이너에만 적용 -->
<div class="sbs oh h30rem">
  <a href="#item1">Item 1</a>
  <a href="#item2">Item 2</a>
  <div id="item1" class="mt4rem">Item 1 콘텐츠</div>
  <div id="item2" class="mt4rem">Item 2 콘텐츠</div>
</div>

적용 대상

sbs는 스크롤이 발생하는 컨테이너에 적용해야 합니다. 페이지 전체에 적용하려면 html 태그에, 특정 영역에만 적용하려면 해당 스크롤 컨테이너에 추가하세요.

사용 예시

페이지 내 목차(TOC) 네비게이션에서 smooth scroll을 적용하는 패턴입니다.

<!-- TOC 네비게이션 + smooth scroll -->
<html class="sbs">
  <body>
    <nav class="pf t0 l0 w20rem h100vh oya p2rem">
      <a href="#intro" class="db py8px c38BDF8 tdn">소개</a>
      <a href="#usage" class="db py8px c38BDF8 tdn">사용법</a>
      <a href="#api" class="db py8px c38BDF8 tdn">API</a>
    </nav>
    <main class="ml20rem p4rem">
      <section id="intro">소개 내용...</section>
      <section id="usage">사용법 내용...</section>
      <section id="api">API 내용...</section>
    </main>
  </body>
</html>

팁 & 주의사항

prefers-reduced-motion

모션 민감 사용자를 위해 prefers-reduced-motion: reduce 미디어 쿼리에서 smooth scroll을 비활성화하는 것을 고려하세요.

JS scrollTo와의 관계

JavaScript의 element.scrollTo({ behavior: 'smooth' })는 CSS scroll-behavior와 독립적입니다. CSS에 sbs를 적용하면 JS에서 behavior를 지정하지 않아도 smooth하게 동작합니다.

overflowoverscroll-behavior