Docs / Overscroll Behavior

Overscroll Behavior

vel-src: layout.css

Utilities for controlling how the browser behaves when reaching the boundary of a scrolling area.

ClassProperties
vel-overscroll-autooverscroll-behavior: auto
vel-overscroll-containoverscroll-behavior: contain
vel-overscroll-noneoverscroll-behavior: none

Examples

Overscroll contain

Scrollable content with vel-overscroll-contain — prevents scroll chaining to parent. Keep scrolling... More content... Even more...
example.html
<div class="vel-overscroll-contain vel-overflow-auto" style="height:80px;background:#1a2236;border:1px solid #1e2d45;border-radius:6px;padding:12px">
  <div style="height:200px;color:#94a3b8;font-size:12px">
    Scrollable content with vel-overscroll-contain — prevents scroll chaining to parent.
    Keep scrolling...
    More content...
    Even more...
  </div>
</div>