Scroller

The built-in scroller tag — a low-level native-scroll container with the browser's own scrollbars. When to use it vs. ScrollArea, options, and a live example.

scroller is a minimal, low-level scroll container — a plain overflow box with the browser’s native scrollbars, no styled overlay bars and no JavaScript. Give it a fixed height with h (and/or width with w) and its content scrolls; axis chooses which way. It’s built on Box (it just adds an overflow style), so it inherits the same spacing, sizing, and color props. For nicer, styled, auto-hiding overlay scrollbars that look the same across platforms, use ScrollArea — scroller is the no-frills sibling. Close the block with {% endScroller %} (one capital S).

Use it as {% scroller %}…{% endScroller %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'scroller', …).

Demonstrations

Give it an h so the content can overflow; the block body is the content. By default it scrolls vertically (axis='y').

Preview:

A native-scrolling region — the browser’s own scrollbar, no styling applied.

This is deliberately plain: it’s just a Box with overflow-y: auto. If you want a styled, auto-hiding scrollbar, switch to the scrollarea tag.

Keep reading — there’s more content here than fits in 140 pixels, so the native scrollbar appears and you can scroll.

Source: Markdown

Source: Python

Horizontal scrolling

axis='x' scrolls sideways instead — useful for a wide table or a row of items that shouldn’t wrap. axis='both' enables scrolling on both axes.

Preview:

onetwothreefourfivesixseveneightnineteneleventwelve

Source: Markdown

Source: Python

With other components

Wrap a stack of Paper surfaces in a fixed-height scroller to keep a long list inside a native-scrolling panel.

Preview:

First row

Second row

Third row

Fourth row

Fifth row — scroll for more

Source: Markdown

Source: Python

Attributes

Omit any attribute to take its default.

Attribute	Valid values	Description
`axis`	`y` (default, vertical) / `x` (horizontal) / `both`	Which way the box scrolls.
`h` / `w`	A CSS length, or a bare number (treated as pixels)	Height / width — give it an `h` so the content can overflow.
`miw` / `mih` / `maw` / `mah`	A CSS length, or a bare number (treated as pixels)	Min/max width and height.
`bg`	A theme color or CSS color	Background color.
`m` / `mt` / `mb` / `ml` / `mr` / `mx` / `my`	A Mantine size token or CSS length	Margin (all / top / bottom / left / right / horizontal / vertical).
`p` / `pt` / `pb` / `pl` / `pr` / `px` / `py`	A Mantine size token or CSS length	Padding (all / top / bottom / left / right / horizontal / vertical).
`attr={…}`	An object of HTML attributes	Forwards raw HTML attributes onto the rendered element.

CSS Selectors

Each scroller carries data-aardvark-island="Box" on its wrapper; it renders a single element with no Mantine Styles API parts, so target the island wrapper.

[data-aardvark-island="Box"] {
  /* style every scroller on the page */
}

Injecting Attributes

attr={…} forwards raw HTML attributes (including event handlers) straight onto the rendered element.

Lots of content to scroll through.

Source: Markdown

Source: Python