ScrollArea

Atom

Scrollable container with a themed, thin scrollbar (Firefox scrollbar-color + WebKit pseudo-elements) instead of the bulky native default. Supports vertical, horizontal, or both-axis scrolling.

Preview

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

Code

<%- include('modules/ui/ScrollArea', {
  className: 'h-40 w-64 border border-border p-3',
  children: itemListHtml
}) %>

Preview

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Card 7

Card 8

Card 9

Card 10

Code

<%- include('modules/ui/ScrollArea', {
  orientation: 'horizontal',
  className: 'w-full border border-border p-3',
  children: cardsRowHtml
}) %>

<%
  var _orientation = locals.orientation || 'vertical';
  var _className   = locals.className || '';

  var overflowClasses = {
    vertical:   'overflow-y-auto overflow-x-hidden',
    horizontal: 'overflow-x-auto overflow-y-hidden',
    both:       'overflow-auto',
  };
  var _overflow = overflowClasses[_orientation] || overflowClasses.vertical;
%>
<div
  tabindex="0"
  role="region"
  aria-label="<%= locals.label || 'Scrollable content' %>"
  class="relative rounded-md <%= _overflow %> [scrollbar-width:thin] [scrollbar-color:var(--border-strong)_transparent] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-border-strong [&::-webkit-scrollbar-thumb]:rounded-full<%= _className ? ' ' + _className : '' %>"
><% if (locals.children) { %><%- locals.children %><% } %></div>

ScrollArea

Vertical list

Horizontal