Tailwind CSS Scroll Cheatsheet

Complete reference for scroll behavior, scroll snap, scroll margin, scroll padding, and overscroll behavior.
Interactive demos included for each utility category.

Quick Navigation

Scroll Behavior Scroll Snap Type Scroll Snap Align Scroll Snap Stop Scroll Margin Scroll Padding Overscroll Behavior FAQ

Scroll Behavior

Class	CSS
`scroll-auto`	`scroll-behavior: auto;`
`scroll-smooth`	`scroll-behavior: smooth;`

Scroll Behavior - Interactive Demo

Click the buttons to see the difference between scroll-auto and scroll-smooth.

scroll-auto (instant)

Top Section

Middle Section

Bottom Section

scroll-smooth (animated)

Top Section

Middle Section

Bottom Section

Scroll Snap Type

Class	CSS
`snap-none`	`scroll-snap-type: none;`
`snap-x`	`scroll-snap-type: x var(--tw-scroll-snap-strictness);`
`snap-y`	`scroll-snap-type: y var(--tw-scroll-snap-strictness);`
`snap-both`	`scroll-snap-type: both var(--tw-scroll-snap-strictness);`
`snap-mandatory`	`--tw-scroll-snap-strictness: mandatory;`
`snap-proximity`	`--tw-scroll-snap-strictness: proximity;`

Horizontal Scroll Snap - Carousel Demo

Scroll horizontally to see items snap into place. Uses snap-x snap-mandatory on container and snap-start on items.

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Code Example

<div class="overflow-x-auto snap-x snap-mandatory flex gap-4">
  <div class="snap-start shrink-0 w-64">Card 1</div>
  <div class="snap-start shrink-0 w-64">Card 2</div>
  <div class="snap-start shrink-0 w-64">Card 3</div>
</div>

Vertical Scroll Snap - Section Demo

Scroll vertically to see sections snap. Uses snap-y snap-mandatory on container and snap-center on items.

Section 1

Section 2

Section 3

Section 4

Scroll Snap Align

Class	CSS
`snap-start`	`scroll-snap-align: start;`
`snap-end`	`scroll-snap-align: end;`
`snap-center`	`scroll-snap-align: center;`
`snap-align-none`	`scroll-snap-align: none;`

Scroll Snap Align Comparison

snap-start

Items align to the start of the container

snap-center

Items align to the center of the container

snap-end

Items align to the end of the container

Scroll Snap Stop

Class	CSS
`snap-normal`	`scroll-snap-stop: normal;`
`snap-always`	`scroll-snap-stop: always;`

snap-always forces the scroll to stop on each snap point, even when scrolling quickly. snap-normal allows skipping snap points during fast scrolling (momentum).

Scroll Margin

Class	CSS
`scroll-m-0`	`scroll-margin: 0px;`
`scroll-m-px`	`scroll-margin: 1px;`
`scroll-m-0.5`	`scroll-margin: 0.125rem; /* 2px */`
`scroll-m-1`	`scroll-margin: 0.25rem; /* 4px */`
`scroll-m-2`	`scroll-margin: 0.5rem; /* 8px */`
`scroll-m-4`	`scroll-margin: 1rem; /* 16px */`
`scroll-m-8`	`scroll-margin: 2rem; /* 32px */`
`scroll-m-16`	`scroll-margin: 4rem; /* 64px */`
`scroll-m-20`	`scroll-margin: 5rem; /* 80px */`
`scroll-m-24`	`scroll-margin: 6rem; /* 96px */`

Scroll Margin Directional Classes

scroll-mx-*

Left & Right

scroll-my-*

Top & Bottom

scroll-mt-*

Top only

scroll-mr-*

Right only

scroll-mb-*

Bottom only

scroll-ml-*

Left only

Replace * with any spacing value (0, px, 0.5, 1, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96).

Scroll Padding

Class	CSS
`scroll-p-0`	`scroll-padding: 0px;`
`scroll-p-px`	`scroll-padding: 1px;`
`scroll-p-0.5`	`scroll-padding: 0.125rem; /* 2px */`
`scroll-p-1`	`scroll-padding: 0.25rem; /* 4px */`
`scroll-p-2`	`scroll-padding: 0.5rem; /* 8px */`
`scroll-p-4`	`scroll-padding: 1rem; /* 16px */`
`scroll-p-8`	`scroll-padding: 2rem; /* 32px */`
`scroll-p-16`	`scroll-padding: 4rem; /* 64px */`
`scroll-p-20`	`scroll-padding: 5rem; /* 80px */`
`scroll-p-24`	`scroll-padding: 6rem; /* 96px */`

Scroll Padding Directional Classes

scroll-px-*

Left & Right

scroll-py-*

Top & Bottom

scroll-pt-*

Top only

scroll-pr-*

Right only

scroll-pb-*

Bottom only

scroll-pl-*

Left only

Replace * with any spacing value (0, px, 0.5, 1, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96).

Scroll Margin & Padding with Sticky Header

When you have a fixed/sticky header, use scroll-mt-* on target elements to prevent them from being hidden under the header.

Sticky Header (h-12)

Section A

scroll-mt-16 ensures this section appears below the sticky header when scrolled to.

Spacer content...

Section B

Also uses scroll-mt-16 for proper offset.

Usage Pattern

<!-- On targets (elements being scrolled to) -->
<section id="about" class="scroll-mt-20">...</section>

<!-- On containers (alternative approach) -->
<html class="scroll-pt-20">...</html>

Overscroll Behavior

Class	CSS
`overscroll-auto`	`overscroll-behavior: auto;`
`overscroll-contain`	`overscroll-behavior: contain;`
`overscroll-none`	`overscroll-behavior: none;`
`overscroll-x-auto`	`overscroll-behavior-x: auto;`
`overscroll-x-contain`	`overscroll-behavior-x: contain;`
`overscroll-x-none`	`overscroll-behavior-x: none;`
`overscroll-y-auto`	`overscroll-behavior-y: auto;`
`overscroll-y-contain`	`overscroll-behavior-y: contain;`
`overscroll-y-none`	`overscroll-behavior-y: none;`

Overscroll Behavior Demo

Control what happens when scrolling past the edge of a scrollable area. Useful for modals and nested scroll containers.

overscroll-auto

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Default - continues to parent scroll

overscroll-contain

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Prevents scroll chaining

overscroll-none

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

No bounce effect either

Tip: Use overscroll-contain on modals to prevent the background page from scrolling when you reach the end of the modal content.

Common Patterns

Horizontal Carousel

<div class="flex overflow-x-auto
     snap-x snap-mandatory">
  <div class="snap-start shrink-0">
    Card 1
  </div>
</div>

Smooth Anchor Links

<html class="scroll-smooth">
  ...
  <section id="about"
    class="scroll-mt-20">
  </section>
</html>

Full-Page Sections

<div class="h-screen overflow-y-auto
     snap-y snap-mandatory">
  <section class="h-screen snap-start">
    Section 1
  </section>
</div>

Modal Scroll Lock

<div class="fixed inset-0
     overflow-y-auto
     overscroll-contain">
  <!-- Modal content -->
</div>

About Tailwind Scroll Utilities

Tailwind's scroll utilities give you fine-grained control over scrolling behavior, snap points, and overscroll effects without writing custom CSS.

Combine scroll-snap with overflow utilities to create carousels, galleries, and paginated content that feels native.

For responsive behavior, prefix any class with a breakpoint: md:snap-x, lg:scroll-smooth

Frequently Asked Questions

What is scroll-smooth in Tailwind CSS?

scroll-smooth enables smooth scrolling behavior in Tailwind CSS. When applied to a container or the html element, clicking anchor links will animate smoothly to the target instead of jumping instantly. It maps directly to the CSS property scroll-behavior: smooth.

How do I create a scroll snap carousel in Tailwind?

Use snap-x snap-mandatory on the container and snap-start (or snap-center) on each child element. Add overflow-x-auto to enable horizontal scrolling and shrink-0 to prevent items from shrinking. This creates a horizontal carousel where items snap into place when scrolling.

What is the difference between scroll-margin and scroll-padding?

scroll-margin is applied to the scroll target (the element being scrolled to) and adds offset from that element. scroll-padding is applied to the scroll container and adds offset from the container's edges. Both are commonly used to account for fixed headers - use scroll-mt-* on sections or scroll-pt-* on the html element.

What does overscroll-contain do?

overscroll-contain prevents scroll chaining to parent elements when you reach the end of a scrollable area. This is particularly useful for modals and dropdown menus to prevent the page from scrolling when the inner content reaches its scroll boundary.

When should I use snap-mandatory vs snap-proximity?

snap-mandatory forces the scroll container to always snap to a snap point - the viewport will always rest exactly on a snap point. snap-proximity only snaps when the scroll position is close to a snap point, allowing more natural scrolling. Use mandatory for carousels and galleries, proximity for long scrollable content.

Inspect scroll utilities on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes including scroll-snap, scroll-behavior, and overflow utilities. Extract any scroll effect with 2 clicks.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →