ContextQMD
Back to Tailwindcss

Scroll Behavior

src/docs/scroll-behavior.mdx

latest965 B
Original Source

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.";

<ApiTable rows={[ ["scroll-auto", "scroll-behavior: auto;"], ["scroll-smooth", "scroll-behavior: smooth;"], ]} />

Examples

Using smooth scrolling

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

html
<!-- [!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:

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