Scroll Margin
Set scroll margin for snap
Syntax
visual="scroll-m:[value]"Values
| Value | CSS Output | Description |
|---|---|---|
scroll-m | scroll-margin: var(--s-{value}) | All sides |
scroll-m-t | scroll-margin-top: var(--s-{value}) | Top margin |
scroll-m-r | scroll-margin-right: var(--s-{value}) | Right margin |
scroll-m-b | scroll-margin-bottom: var(--s-{value}) | Bottom margin |
scroll-m-l | scroll-margin-left: var(--s-{value}) | Left margin |
Examples
html
<div visual="scroll-m:medium">Scroll margin</div>Preview
Scroll Margin
visual="scroll-m:medium" - Offset for scroll snap
scroll-m:medium
View Code
html
<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<div space="p:small" visual="bg:primary text:white rounded:small">scroll-m:medium</div>
</div>Arbitrary Values
Supports custom values using bracket syntax:
html
<div visual="scroll:[custom-value]">Custom</div>