Tailwind CSS - 滚动内边距

Tailwind CSS：精通滚动内边距（Scroll Padding）

滚动内边距（scroll-padding）工具类用于控制滚动容器的**滚动视口（scrollport）**内的内边距。它们最主要、最强大的用例是抵消滚动到锚点的位置，以适应像页眉或导航栏这样的粘性元素，确保链接的内容永远不会被遮挡。

问题：粘性页眉遮挡内容

想象一下，你有一个粘性页眉和一个指向页面下方某个部分的导航链接（如 <a href="#section-b">）。当你点击该链接时，浏览器会将页面滚动到 #section-b 位于视口最顶部的位置，但你的粘性页眉会遮盖住该章节的标题。scroll-padding 完美地解决了这个问题。

核心滚动内边距工具类

这些工具类遵循一个熟悉的模式：scroll-{p|px|py|pt|...}-{amount}。其中的 {amount} 值来源于你的 theme.spacing 间距比例尺。这些类应该应用于充当滚动容器的元素（通常是 <html> 元素）。

类名	CSS 属性	常见用例
scroll-pt-{amount}	scroll-padding-top: ...	最常用的工具类。为滚动视口顶部添加内边距，以抵消粘性页眉的影响。例如：scroll-pt-16。
scroll-p-{amount}	scroll-padding: ...	设置滚动视口所有四个方向的内边距。
scroll-px-{amount}	scroll-padding-left/right: ...	适用于水平轮播图，在起始和结束位置提供空间。
scroll-ps-{amount}	scroll-padding-inline-start: ...	一个逻辑属性，用于根据书写方向（从左到右/从右到左）设置左右内边距。

实际应用：粘性页眉导航

此示例演示了主要用例。<html> 元素是滚动容器，因此我们对其应用了 scroll-pt-20 和 scroll-smooth。页眉上的 h-20 与 scroll-pt-20 的值匹配，从而创建了一个完美的偏移。

<!DOCTYPE html>
<!-- 滚动容器。`scroll-smooth` 使滚动跳转更平滑。 -->
<html lang="en" class="scroll-smooth scroll-pt-20">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Padding Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-800">

  <!-- 一个 5rem (h-20) 高的粘性页眉 -->
  <header class="sticky top-0 h-20 bg-white/80 backdrop-blur-md shadow-sm z-10">
    <nav class="mx-auto max-w-4xl h-full flex items-center justify-around font-medium">
      <a href="#section-a" class="hover:text-blue-600">Section A</a>
      <a href="#section-b" class="hover:text-blue-600">Section B</a>
      <a href="#section-c" class="hover:text-blue-600">Section C</a>
    </nav>
  </header>

  <main class="mx-auto max-w-4xl p-8 space-y-12">
    <section id="section-a">
      <h2 class="text-2xl font-bold mb-4">Section A</h2>
      <p class="leading-relaxed">...</p>
    </section>

    <section id="section-b">
      <h2 class="text-2xl font-bold mb-4">Section B</h2>
      <p class="leading-relaxed">当你点击 'Section B' 的链接时，`<html>` 标签上的 `scroll-pt-20` 确保了此标题不会被粘性页眉隐藏。尝试移除它以查看差异！</p>
      <div class="h-96 bg-gray-200 rounded-lg mt-4"></div>
    </section>

    <section id="section-c">
      <h2 class="text-2xl font-bold mb-4">Section C</h2>
      <p class="leading-relaxed">...</p>
    </section>
  </main>

</body>
</html>

高级用例：滚动吸附轮播图

滚动内边距对于创建整洁的滚动吸附界面也至关重要。scroll-px 工具类在滚动容器的起始和结束位置提供了内边距，因此第一个和最后一个项目可以吸附到视口中心。

<div class="flex snap-x snap-mandatory overflow-x-auto scroll-px-6">
  <!-- `scroll-px-6` 提供了必要的起始/结束内边距 -->
  <div class="w-4/5 flex-shrink-0 snap-center p-4">
    <div class="h-48 rounded-lg bg-blue-300"></div>
  </div>
  <div class="w-4/5 flex-shrink-0 snap-center p-4">
    <div class="h-48 rounded-lg bg-green-300"></div>
  </div>
  <div class="w-4/5 flex-shrink-0 snap-center p-4">
    <div class="h-48 rounded-lg bg-yellow-300"></div>
  </div>
</div>

自定义和任意值

如果你的粘性页眉的高度与你的间距比例尺不符，你可以轻松使用任意值。这是一种常见且高效的技术。

<!-- 如果你的页眉高度恰好是 68px -->
<html class="scroll-pt-[68px]">
  ...
</html>