Tailwind CSS 主页
  1. 交互性
  2. 滚动行为

快速参考

类
属性
scroll-autoscroll-behavior: auto;
scroll-smoothscroll-behavior: smooth;

基本用法

添加平滑滚动

使用scroll-smooth实用程序在元素内启用平滑滚动。

<html class="scroll-smooth">
  <!-- ... -->
</html>

有条件地应用

悬停、聚焦和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用focus:scroll-auto仅在聚焦时应用scroll-auto实用程序。

<html class="scroll-smooth focus:scroll-auto">
  <!-- ... -->
</html>

有关所有可用状态修饰符的完整列表，请查看悬停、聚焦和其它状态文档。

断点和媒体查询

您还可以使用变体修饰符来针对媒体查询，例如响应式断点、深色模式、 prefers-reduced-motion 等等。例如，使用 md:scroll-auto 仅在中型屏幕尺寸及以上应用 scroll-auto 实用程序。

<html class="scroll-smooth md:scroll-auto">
  <!-- ... -->
</html>

要了解更多信息，请查看有关 响应式设计、深色模式 和 其他媒体查询修饰符 的文档。