滚动行为 - Tailwind CSS

Quick reference

Class	Properties
scroll-auto	scroll-behavior: auto;
scroll-smooth	scroll-behavior: smooth;

使用 scroll-smooth 实用程序可实现元素内的平滑滚动。

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

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

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

详细了解, 请参考 Hover, Focus, & Other States 文档.

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:scroll-auto 来应用 scroll-auto 程序，适用于中等屏幕尺寸及以上。

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