Overscroll
Control scroll chaining behavior
Syntax
layout="overscroll:[value]"Values
| Value | CSS Output | Description |
|---|---|---|
auto | overscroll-behavior: auto | Default behavior |
contain | overscroll-behavior: contain | Contain scroll |
none | overscroll-behavior: none | No scroll chaining |
Examples
html
<div layout="overscroll:contain">Contained scroll</div>Preview
Overscroll Contain
layout="overscroll:contain" - Prevent scroll from affecting parent
Scroll here won't chain to parent. Content continues for demo purposes to show scrolling behavior.
View Code
html
<div layout="overscroll:contain overflow:auto" space="p:small" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 60px;">
<p visual="text:neutral-800 dark:text:neutral-200">Scroll here won't chain to parent. Content continues for demo purposes to show scrolling behavior.</p>
</div>