Aller au contenu

Scroll behavior

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx";

export const title = "scroll-behavior"; export const description = "Utilities for controlling the scroll behavior of an element.";

Examples

Using smooth scrolling

Use the scroll-smooth utility to enable smooth scrolling within an element:

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

Setting the scroll-behavior only affects scroll events that are triggered by the browser.

Using normal scrolling

Use the scroll-auto utility to revert to the default browser behavior for scrolling:

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