Press
/
to search

Interactivity

Scroll Margin

Utilities for sets scroll-snap container sticks to the top of the viewport with margin 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-margin-1scroll-margin: 0.25rem
scroll-margin-2scroll-margin: 0.5rem
scroll-margin-3scroll-margin: 0.75rem
scroll-margin-4scroll-margin: 1rem
scroll-margin-5scroll-margin: 1.25rem
scroll-margin-6scroll-margin: 1.5rem
scroll-margin-8scroll-margin: 2rem
scroll-margin-10scroll-margin: 2.5rem
scroll-margin-12scroll-margin: 3rem
scroll-margin-16scroll-margin: 4rem
scroll-margin-20scroll-margin: 5rem
scroll-margin-24scroll-margin: 6rem
scroll-margin-32scroll-margin: 8rem
scroll-margin-40scroll-margin: 10rem
scroll-margin-48scroll-margin: 12rem
scroll-margin-56scroll-margin: 14rem
scroll-margin-64scroll-margin: 16rem
scroll-margin-72scroll-margin: 18rem
scroll-margin-80scroll-margin: 20rem
scroll-margin-88scroll-margin: 22rem
scroll-margin-96scroll-margin: 24rem
scroll-margin-104scroll-margin: 26rem
scroll-margin-112scroll-margin: 28rem
classcss
scroll-margin-t-1scroll-margin-top: 0.25rem
scroll-margin-t-2scroll-margin-top: 0.5rem
scroll-margin-t-3scroll-margin-top: 0.75rem
scroll-margin-t-4scroll-margin-top: 1rem
scroll-margin-t-5scroll-margin-top: 1.25rem
scroll-margin-t-6scroll-margin-top: 1.5rem
scroll-margin-t-8scroll-margin-top: 2rem
scroll-margin-t-10scroll-margin-top: 2.5rem
scroll-margin-t-12scroll-margin-top: 3rem
scroll-margin-t-16scroll-margin-top: 4rem
scroll-margin-t-20scroll-margin-top: 5rem
scroll-margin-t-24scroll-margin-top: 6rem
scroll-margin-t-32scroll-margin-top: 8rem
scroll-margin-t-40scroll-margin-top: 10rem
scroll-margin-t-48scroll-margin-top: 12rem
scroll-margin-t-56scroll-margin-top: 14rem
scroll-margin-t-64scroll-margin-top: 16rem
scroll-margin-t-72scroll-margin-top: 18rem
scroll-margin-t-80scroll-margin-top: 20rem
scroll-margin-t-88scroll-margin-top: 22rem
scroll-margin-t-96scroll-margin-top: 24rem;
scroll-margin-t-104scroll-margin-top: 26rem;
scroll-margin-t-112scroll-margin-top: 28rem;
classcss
scroll-margin-b-1scroll-margin-bottom: 0.25rem
scroll-margin-b-2scroll-margin-bottom: 0.5rem
scroll-margin-b-3scroll-margin-bottom: 0.75rem
scroll-margin-b-4scroll-margin-bottom: 1rem
scroll-margin-b-5scroll-margin-bottom: 1.25rem
scroll-margin-b-6scroll-margin-bottom: 1.5rem
scroll-margin-b-8scroll-margin-bottom: 2rem
scroll-margin-b-10scroll-margin-bottom: 2.5rem
scroll-margin-b-12scroll-margin-bottom: 3rem
scroll-margin-b-16scroll-margin-bottom: 4rem
scroll-margin-b-20scroll-margin-bottom: 5rem
scroll-margin-b-24scroll-margin-bottom: 6rem
scroll-margin-b-32scroll-margin-bottom: 8rem
scroll-margin-b-40scroll-margin-bottom: 10rem
scroll-margin-b-48scroll-margin-bottom: 12rem
scroll-margin-b-56scroll-margin-bottom: 14rem
scroll-margin-b-64scroll-margin-bottom: 16rem
scroll-margin-b-72scroll-margin-bottom: 18rem
scroll-margin-b-80scroll-margin-bottom: 20rem
scroll-margin-b-88scroll-margin-bottom: 22rem
scroll-margin-b-96scroll-margin-bottom: 24rem
scroll-margin-b-104scroll-margin-bottom: 26rem
scroll-margin-b-112scroll-margin-bottom: 28rem
classcss
scroll-margin-l-1scroll-margin-left: 0.25rem
scroll-margin-l-2scroll-margin-left: 0.5rem
scroll-margin-l-3scroll-margin-left: 0.75rem
scroll-margin-l-4scroll-margin-left: 1rem
scroll-margin-l-5scroll-margin-left: 1.25rem
scroll-margin-l-6scroll-margin-left: 1.5rem
scroll-margin-l-8scroll-margin-left: 2rem
scroll-margin-l-10scroll-margin-left: 2.5rem
scroll-margin-l-12scroll-margin-left: 3rem
scroll-margin-l-16scroll-margin-left: 4rem
scroll-margin-l-20scroll-margin-left: 5rem
scroll-margin-l-24scroll-margin-left: 6rem
scroll-margin-l-32scroll-margin-left: 8rem
scroll-margin-l-40scroll-margin-left: 10rem
scroll-margin-l-48scroll-margin-left: 12rem
scroll-margin-l-56scroll-margin-left: 14rem
scroll-margin-l-64scroll-margin-left: 16rem
scroll-margin-l-72scroll-margin-left: 18rem
scroll-margin-l-80scroll-margin-left: 20rem
scroll-margin-l-88scroll-margin-left: 22rem
scroll-margin-l-96scroll-margin-left: 24rem
scroll-margin-l-104scroll-margin-left: 26rem
scroll-margin-l-112scroll-margin-left: 28rem
classcss
scroll-margin-r-1scroll-margin-left: 0.25rem
scroll-margin-r-2scroll-margin-left: 0.5rem
scroll-margin-r-3scroll-margin-left: 0.75rem
scroll-margin-r-4scroll-margin-left: 1rem
scroll-margin-r-5scroll-margin-left: 1.25rem
scroll-margin-r-6scroll-margin-left: 1.5rem
scroll-margin-r-8scroll-margin-left: 2rem
scroll-margin-r-10scroll-margin-left: 2.5rem
scroll-margin-r-12scroll-margin-left: 3rem
scroll-margin-r-16scroll-margin-left: 4rem
scroll-margin-r-20scroll-margin-left: 5rem
scroll-margin-r-24scroll-margin-left: 6rem
scroll-margin-r-32scroll-margin-left: 8rem
scroll-margin-r-40scroll-margin-left: 10rem
scroll-margin-r-48scroll-margin-left: 12rem
scroll-margin-r-56scroll-margin-left: 14rem
scroll-margin-r-64scroll-margin-left: 16rem
scroll-margin-r-72scroll-margin-left: 18rem
scroll-margin-r-80scroll-margin-left: 20rem
scroll-margin-r-88scroll-margin-left: 22rem
scroll-margin-r-96scroll-margin-left: 24rem
scroll-margin-r-104scroll-margin-left: 26rem
scroll-margin-r-112scroll-margin-left: 28rem

Usage


HTML

SCSS