Press
/
to search

Interactivity

Scroll Padding

Utilities for sets scroll-snap container sticks to the top of the viewport with padding and forces the page to stop scrolling.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

classcss
scroll-padding-1scroll-padding: 0.25rem
scroll-padding-2scroll-padding: 0.5rem
scroll-padding-3scroll-padding: 0.75rem
scroll-padding-4scroll-padding: 1rem
scroll-padding-5scroll-padding: 1.25rem
scroll-padding-6scroll-padding: 1.5rem
scroll-padding-8scroll-padding: 2rem
scroll-padding-10scroll-padding: 2.5rem
scroll-padding-12scroll-padding: 3rem
scroll-padding-16scroll-padding: 4rem
scroll-padding-20scroll-padding: 5rem
scroll-padding-24scroll-padding: 6rem
scroll-padding-32scroll-padding: 8rem
scroll-padding-40scroll-padding: 10rem
scroll-padding-48scroll-padding: 12rem
scroll-padding-56scroll-padding: 14rem
scroll-padding-64scroll-padding: 16rem
scroll-padding-72scroll-padding: 18rem
scroll-padding-80scroll-padding: 20rem
scroll-padding-88scroll-padding: 22rem
scroll-padding-96scroll-padding: 24rem
scroll-padding-104scroll-padding: 26rem
scroll-padding-112scroll-padding: 28rem
classcss
scroll-padding-t-1scroll-padding-top: 0.25rem
scroll-padding-t-2scroll-padding-top: 0.5rem
scroll-padding-t-3scroll-padding-top: 0.75rem
scroll-padding-t-4scroll-padding-top: 1rem
scroll-padding-t-5scroll-padding-top: 1.25rem
scroll-padding-t-6scroll-padding-top: 1.5rem
scroll-padding-t-8scroll-padding-top: 2rem
scroll-padding-t-10scroll-padding-top: 2.5rem
scroll-padding-t-12scroll-padding-top: 3rem
scroll-padding-t-16scroll-padding-top: 4rem
scroll-padding-t-20scroll-padding-top: 5rem
scroll-padding-t-24scroll-padding-top: 6rem
scroll-padding-t-32scroll-padding-top: 8rem
scroll-padding-t-40scroll-padding-top: 10rem
scroll-padding-t-48scroll-padding-top: 12rem
scroll-padding-t-56scroll-padding-top: 14rem
scroll-padding-t-64scroll-padding-top: 16rem
scroll-padding-t-72scroll-padding-top: 18rem
scroll-padding-t-80scroll-padding-top: 20rem
scroll-padding-t-88scroll-padding-top: 22rem
scroll-padding-t-96scroll-padding-top: 24rem;
scroll-padding-t-104scroll-padding-top: 26rem;
scroll-padding-t-112scroll-padding-top: 28rem;
classcss
scroll-padding-b-1scroll-padding-bottom: 0.25rem
scroll-padding-b-2scroll-padding-bottom: 0.5rem
scroll-padding-b-3scroll-padding-bottom: 0.75rem
scroll-padding-b-4scroll-padding-bottom: 1rem
scroll-padding-b-5scroll-padding-bottom: 1.25rem
scroll-padding-b-6scroll-padding-bottom: 1.5rem
scroll-padding-b-8scroll-padding-bottom: 2rem
scroll-padding-b-10scroll-padding-bottom: 2.5rem
scroll-padding-b-12scroll-padding-bottom: 3rem
scroll-padding-b-16scroll-padding-bottom: 4rem
scroll-padding-b-20scroll-padding-bottom: 5rem
scroll-padding-b-24scroll-padding-bottom: 6rem
scroll-padding-b-32scroll-padding-bottom: 8rem
scroll-padding-b-40scroll-padding-bottom: 10rem
scroll-padding-b-48scroll-padding-bottom: 12rem
scroll-padding-b-56scroll-padding-bottom: 14rem
scroll-padding-b-64scroll-padding-bottom: 16rem
scroll-padding-b-72scroll-padding-bottom: 18rem
scroll-padding-b-80scroll-padding-bottom: 20rem
scroll-padding-b-88scroll-padding-bottom: 22rem
scroll-padding-b-96scroll-padding-bottom: 24rem
scroll-padding-b-104scroll-padding-bottom: 26rem
scroll-padding-b-112scroll-padding-bottom: 28rem
classcss
scroll-padding-l-1scroll-padding-left: 0.25rem
scroll-padding-l-2scroll-padding-left: 0.5rem
scroll-padding-l-3scroll-padding-left: 0.75rem
scroll-padding-l-4scroll-padding-left: 1rem
scroll-padding-l-5scroll-padding-left: 1.25rem
scroll-padding-l-6scroll-padding-left: 1.5rem
scroll-padding-l-8scroll-padding-left: 2rem
scroll-padding-l-10scroll-padding-left: 2.5rem
scroll-padding-l-12scroll-padding-left: 3rem
scroll-padding-l-16scroll-padding-left: 4rem
scroll-padding-l-20scroll-padding-left: 5rem
scroll-padding-l-24scroll-padding-left: 6rem
scroll-padding-l-32scroll-padding-left: 8rem
scroll-padding-l-40scroll-padding-left: 10rem
scroll-padding-l-48scroll-padding-left: 12rem
scroll-padding-l-56scroll-padding-left: 14rem
scroll-padding-l-64scroll-padding-left: 16rem
scroll-padding-l-72scroll-padding-left: 18rem
scroll-padding-l-80scroll-padding-left: 20rem
scroll-padding-l-88scroll-padding-left: 22rem
scroll-padding-l-96scroll-padding-left: 24rem
scroll-padding-l-104scroll-padding-left: 26rem
scroll-padding-l-112scroll-padding-left: 28rem
classcss
scroll-padding-r-1scroll-padding-left: 0.25rem
scroll-padding-r-2scroll-padding-left: 0.5rem
scroll-padding-r-3scroll-padding-left: 0.75rem
scroll-padding-r-4scroll-padding-left: 1rem
scroll-padding-r-5scroll-padding-left: 1.25rem
scroll-padding-r-6scroll-padding-left: 1.5rem
scroll-padding-r-8scroll-padding-left: 2rem
scroll-padding-r-10scroll-padding-left: 2.5rem
scroll-padding-r-12scroll-padding-left: 3rem
scroll-padding-r-16scroll-padding-left: 4rem
scroll-padding-r-20scroll-padding-left: 5rem
scroll-padding-r-24scroll-padding-left: 6rem
scroll-padding-r-32scroll-padding-left: 8rem
scroll-padding-r-40scroll-padding-left: 10rem
scroll-padding-r-48scroll-padding-left: 12rem
scroll-padding-r-56scroll-padding-left: 14rem
scroll-padding-r-64scroll-padding-left: 16rem
scroll-padding-r-72scroll-padding-left: 18rem
scroll-padding-r-80scroll-padding-left: 20rem
scroll-padding-r-88scroll-padding-left: 22rem
scroll-padding-r-96scroll-padding-left: 24rem
scroll-padding-r-104scroll-padding-left: 26rem
scroll-padding-r-112scroll-padding-left: 28rem

Usage


HTML

SCSS