Tailwind Slider Snap / 스냅 활용 예시

<main
  class="flex flex-col w-full h-screen overflow-scroll snap-y snap-mandatory"
>
      <index1-section class="snap-center snap-always" />
      <index2-section class="snap-center snap-always" />
      <index3-section class="snap-center snap-always" />
      <index4-section class="snap-center snap-always" />
      <index5-section class="snap-center snap-always" />
      <index6-section class="snap-center snap-always" />
      <index7-section class="snap-center snap-always" />
      <index8-section class="snap-center snap-always" />
      <index9-section class="snap-center snap-always" />
  </main>

1. 부모 태그 필수 요소 : overflow-scrolll, h-screen, snap-y, snap-madatory 이 중에 하나라도 빠지면 작동 안 됩니다.

2. 자식 태그 필수 요소 : snap-center => 중앙으로 갈 것이기 때문에~ 자유롭게 다른 값 사용 가능!, snap-always 항상 작동하도록!

 

https://tailwindcss.com/docs/scroll-snap-type

Scroll Snap Type - Tailwind CSS

참고