Skip to content
全部文档

scroll-behavior

用于控制元素滚动行为的工具类。

快速参考

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

示例

使用平滑滚动

使用 scroll-smooth 工具类,在元素内启用平滑滚动:

html
<!-- [!code classes:scroll-smooth] -->
<html class="scroll-smooth">
  <!-- ... -->
</html>

设置 scroll-behavior 只会影响由浏览器触发的滚动事件。

使用普通滚动

使用 scroll-auto 工具类,将滚动恢复为浏览器默认行为:

html
<!-- [!code classes:scroll-auto] -->
<html class="scroll-smooth md:scroll-auto">
  <!-- ... -->
</html>

文档译文以 MIT 协议授权;原文版权归 Tailwind Labs。湘ICP备2026005453号-2