笙亿网络策划

Tailwind CSS Scroll Snap Type 怎么用？如何实现滚动捕捉效果？

约 13 分钟读完 7 阅
文章导读
Previous Quiz Next Tailwind CSS Scroll Snap Type 是一组预定义的 class，用于控制容器内滚动停止和对齐的具体位置。
📋 目录
  1. A Tailwind CSS Scroll Snap Type Classes
  2. B Tailwind CSS Scroll Snap Type Classes 的功能
  3. C Tailwind CSS Scroll Snap Type Class 示例
  4. D 使用 Tailwind CSS 实现水平滚动对齐
  5. E Tailwind CSS 强制对齐点
  6. F Tailwind CSS 使用 Snap Proximity 进行滚动对齐
  7. G 垂直 Snap 滚动与强制对齐
A A

Tailwind CSS - Scroll Snap Type

Previous
Quiz
Next

Tailwind CSS Scroll Snap Type 是一组预定义的 class，用于控制容器内滚动停止和对齐的具体位置。

Tailwind CSS Scroll Snap Type Classes

下面列出了用于控制容器内滚动如何对齐到特定位置的 Tailwind CSS Scroll Snap Type classes。

Class CSS Properties
snap-none scroll-snap-type: none;
snap-x scroll-snap-type: x var(--tw-scroll-snap-strictness);
snap-y scroll-snap-type: y var(--tw-scroll-snap-strictness);
snap-both scroll-snap-type: both var(--tw-scroll-snap-strictness);
snap-mandatory --tw-scroll-snap-strictness: mandatory;
snap-proximity --tw-scroll-snap-strictness: proximity;

Tailwind CSS Scroll Snap Type Classes 的功能

  • snap-none: 禁用对齐，允许自由滚动。
  • snap-x: 在水平滚动时对齐元素。
  • snap-y: 在垂直滚动时对齐元素。
  • snap-both: 同时在水平和垂直方向对齐元素。
  • snap-mandatory: 滚动时始终对齐到最近的 snap point。
  • snap-proximity: 当滚动接近时对齐到最近的 snap point。

Tailwind CSS Scroll Snap Type Class 示例

下面是 Tailwind CSS Scroll Snap Type classes 的示例，展示它们如何控制容器内滚动停止和对齐的具体位置。

使用 Tailwind CSS 实现水平滚动对齐

此示例展示了如何使用 Tailwind CSS Scroll Snap Type classes。以下代码应用了 snap-x class 来启用水平滚动对齐，并为子元素设置了 scroll snap 对齐。当你水平滚动时，每个项目都会整齐地对齐到 scroll snap 点。

示例

  
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl font-bold mb-4">
        Tailwind CSS Scroll Snap Type
    </h2>  
    <h2 class="text-xl font-bold mb-4">scroll-snap-x</h2>
    <div class="flex overflow-x-auto snap-x gap-4 mb-4">
        <div class="snap-center flex-shrink-0 w-96 h-32 
                    bg-red-500 text-white flex items-center justify-center">
                Block A
        </div>
        <div class="snap-center flex-shrink-0 w-96 h-32 
                    bg-blue-500 text-white flex items-center justify-center">
                Block B
        </div>
        <div class="snap-center flex-shrink-0 w-96 h-32 
                    bg-green-500 text-white flex items-center justify-center">
                Block C
        </div>
    </div>
    <p class="text-center">With <strong>snap-x</strong>, 
        items align horizontally while scrolling.
    </p>
</body>

</html>

Tailwind CSS 强制对齐点

本示例展示了如何使用 Tailwind CSS Scroll Snap Type Classes，通过 snap-mandatory 类来确保水平滚动时，项目总是对齐到最近的 snap point，从而改善视觉对齐效果。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl font-bold mb-2">
        Tailwind CSS Scroll Snap Type
    </h2>
    <h2 class="text-xl font-bold mb-4">scroll-snap-mandatory</h2>
    <div class="flex overflow-x-auto snap-x snap-mandatory gap-4 mb-4">
        <div class="snap-center flex-shrink-0 w-96 h-32 bg-red-500 
                    text-white flex items-center justify-center">
                Block A
        </div>
        <div class="snap-center flex-shrink-0 w-96 h-32 bg-blue-500 
                    text-white flex items-center justify-center">
                Block B
        </div>
        <div class="snap-center flex-shrink-0 w-96 h-32 bg-green-500 
                    text-white flex items-center justify-center">
                Block C
        </div>
    </div>
    <p class="text-center">With <strong>snap-mandatory</strong>, 
        items will always snap to the nearest point.
    </p>
</body>

</html>

Tailwind CSS 使用 Snap Proximity 进行滚动对齐

本示例展示了 snap-proximity 类，它确保在水平滚动时项目对齐到最近的点。当接近某个 snap point 时，滚动会将项目对齐到该点，提供更流畅的滚动体验。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl font-bold mb-2">
        Tailwind CSS Scroll Snap Type
    </h2>
    <h2 class="text-xl font-bold mb-4">scroll-snap-proximity</h2>
    <div class="flex overflow-x-auto snap-x snap-proximity gap-4 mb-4">
        <div class="snap-center flex-shrink-0 w-96 h-32 bg-red-500 
                    text-white flex items-center justify-center">
                Block X
        </div>
        <div class="snap-center flex-shrink-0 w-96 h-32 bg-blue-500 
                    text-white flex items-center justify-center">
                Block Y
        </div>
        <div class="snap-center flex-shrink-0 w-96 h-32 bg-green-500 
                    text-white flex items-center justify-center">
                Block Z
        </div>
    </div>
    <p class="text-center">With <strong>snap-proximity</strong>,
        items align to the nearest point when close.
    </p>
</body>

</html>

垂直 Snap 滚动与强制对齐

本示例展示了如何使用 Tailwind CSS 的 Scroll Snap Type 类。以下代码应用了 snap-y 与 snap-mandatory，使垂直滚动平滑且精确。当你滚动浏览项目时，每个项目都会整齐地吸附到位，确保视图一致且有序。

示例

  
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl font-bold mb-2">
        Tailwind CSS Scroll Snap Type
    </h2>
    <h2 class="text-xl font-bold mb-4">
        scroll-snap-y with snap-mandatory 
    </h2>
    <div class="flex flex-col overflow-y-auto snap-y 
        snap-mandatory gap-4 h-44">
        <div class="snap-center flex-shrink-0 w-72 h-28 bg-red-500 
                    text-white flex items-center justify-center">
                Block A
        </div>
        <div class="snap-center flex-shrink-0 w-72 h-28 bg-blue-500 
                    text-white flex items-center justify-center">
                Block B
        </div>
        <div class="snap-center flex-shrink-0 w-72 h-28 bg-green-500 
                    text-white flex items-center justify-center">
                Block C
        </div>
         <div class="snap-center flex-shrink-0 w-72 h-28 bg-green-500 
                    text-white flex items-center justify-center">
                Block D
        </div>
    </div>
    <p class="text-center">With <strong>snap-y</strong> and 
        <strong>snap-mandatory</strong>, items align 
        vertically and always snap to a point.
    </p>
</body>

</html>