Tailwind CSS - 滚动对齐

Tailwind CSS - 滚动吸附对齐

Tailwind 的滚动吸附工具类（Scroll Snap utilities）允许你创建引人入胜的“吸附到位置”滚动体验，非常适合图片轮播图、产品画廊或全页垂直幻灯片。这些工具类控制用户滚动时子元素在滚动容器内对齐的位置和方式。

关键概念：容器与项目

创建一个滚动吸附界面涉及两个部分：

滚动容器（父元素）： 你必须定义滚动方向（snap-x 或 snap-y）和严格性（snap-mandatory 或 snap-proximity）。
吸附项目（子元素）： 你必须使用 snap-start、snap-center 或 snap-end 等工具类来指定每个子元素应如何与容器的“吸附视口（snapport）”对齐。

类名	CSS 属性
`snap-start`	`scroll-snap-align: start;`
`snap-end`	`scroll-snap-align: end;`
`snap-center`	`scroll-snap-align: center;`
`snap-align-none`	`scroll-snap-align: none;`

实际应用：图片轮播图

此示例构建了一个响应式水平图片轮播图。我们在父 div 上使用 snap-x 和 snap-mandatory 来创建一个水平吸附容器。内部的每张图片都是一个吸附项目。尝试将 img 标签上的 snap-start 更改为 snap-center 或 snap-end，看看它是如何改变对齐方式的。

示例：水平吸附轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Snap Carousel</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-4 md:p-8">

    <div class="max-w-4xl mx-auto">
        <h1 class="text-2xl md:text-3xl font-bold text-center mb-4">滚动吸附画廊</h1>
        <p class="text-center text-gray-600 mb-6">水平滚动以查看项目吸附到位。</p>

        <!-- 滚动吸附容器 -->
        <div class="flex overflow-x-auto snap-x snap-mandatory scroll-smooth pb-4 space-x-4">

            <!-- 吸附项目 -->
            <div class="snap-center flex-shrink-0 w-4/5 md:w-2/3">
                <img src="https://images.unsplash.com/photo-1682687220247-9f786e34d472?w=500" alt="沙漠风光 1" class="w-full h-80 object-cover rounded-lg shadow-xl">
                <p class="text-center mt-2 font-semibold">居中吸附</p>
            </div>

            <div class="snap-center flex-shrink-0 w-4/5 md:w-2/3">
                <img src="https://images.unsplash.com/photo-1682685797828-d3b2561deef4?w=500" alt="沙漠风光 2" class="w-full h-80 object-cover rounded-lg shadow-xl">
                <p class="text-center mt-2 font-semibold">居中吸附</p>
            </div>

            <div class="snap-start flex-shrink-0 w-4/5 md:w-2/3">
                <img src="https://images.unsplash.com/photo-1707343848655-318af70f0df2?w=500" alt="水下场景" class="w-full h-80 object-cover rounded-lg shadow-xl">
                <p class="text-center mt-2 font-semibold">起始吸附</p>
            </div>

            <div class="snap-end flex-shrink-0 w-4/5 md:w-2/3">
                <img src="https://images.unsplash.com/photo-1708922473842-841f35868843?w=500" alt="山脉" class="w-full h-80 object-cover rounded-lg shadow-xl">
                <p class="text-center mt-2 font-semibold">结束吸附</p>
            </div>

        </div>
    </div>

</body>
</html>

常见陷阱与最佳实践

忘记容器工具类： 如果父滚动容器没有 snap-x 或 snap-y 工具类，子元素上的 snap-* 对齐类将不起作用。
项目尺寸： 吸附项目需要定义宽度（对于 snap-x）或高度（对于 snap-y）。在 flex 容器中使用 flex-shrink-0 至关重要，以防止项目收缩适应。
滚动槽/内边距： 注意滚动内边距。你可以在容器上使用 scroll-p-4 等工具类来添加偏移，这样项目就不会直接吸附到视口边缘。
snap-mandatory 与 snap-proximity： 对于严格的吸附体验，即浏览器必须吸附到某个项目时，请使用 snap-mandatory。对于更柔和的吸附，即仅当用户停止滚动到某个项目附近时才吸附，请使用 snap-proximity。