Make components scrollable

Use scrollable-horizontal or scrollable-vertical to make an element scrollable with the enhancements we’ve built into scrollable.

<!-- horizontal scrollable component -->
<div class="scrollable-horizontal"> ... </div>

<!-- vertical scrollable component -->
<div class="scrollable-vertical"> ... </div>

CSS Scroll Snap enabled without extra work

Try scrolling the demo to see it work! Checkout the options in the guide to customize CSS Scroll Snap behaviour.

Allow users to scroll horizontally without pressing shift

Very few people know you can scroll through horizontal content by pressing shift and scrolling the mouse wheel. It’s a pity if they scrolled past your horizontal content without seeing it.

To counter this, we included a script to convert vertical scroll to horizontal scroll with pretty good finese — this even restores CSS Scroll Snap when the user is done scrolling!

See the guide for more details.

Preserves outlines

Overflow cuts off outlines that extend over an element’s boundaries. We’ve added a small utility that preserves those outlines so your component can still look great.