Scrollable Container
Category: BasicA scrollable container (scroller) is used to display content that is too wide or tall by enabling scrolling. It supports both horizontal and vertical scrolling.
Introduction
Mobile applications are currently very popular, but mobile devices have limited screen width which restricts content display. When using large tables, content may overflow causing the entire page to scroll.
We need to prevent the entire page from scrolling while allowing only the overflowing content nodes to scroll. However, nodes typically adapt to their own content dimensions, so we need to constrain the parent container's size to enable scrolling behavior.
The scrollable container serves this exact purpose.
Basic Usage
Apply the _scroller class to create a scrollable container with default width and height that adapts to content.
- Output
- HTML
-
The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.
-
Constrained Dimensions
You can set fixed width/height for scroll containers or use container variables:
--_sclr-h: Scroll container height--_sclr-w: Scroll container width
- Output
- HTML
-
The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.
-
Adaptive Width & Height
Scrollable containers with fixed dimensions may not display properly across all devices. The framework provides CSS variables for responsive dimension control:
| CSS Variable | Target Device | Description |
|---|---|---|
--_xxs-w |
Mobile phones | Width on small mobile screens |
--_xxs-h |
Mobile phones | Height on small mobile screens |
--_xs-w |
Tablets (portrait) | Tablet portrait width |
--_xs-h |
Tablets (portrait) | Tablet portrait height |
--_sm-w |
Tablets (landscape) | Tablet landscape width |
--_sm-h |
Tablets (landscape) | Tablet landscape height |
--_md-w |
Laptops | Laptop width |
--_md-h |
Laptops | Laptop height |
--_lg-w |
Desktop PCs | Desktop width |
--_lg-h |
Desktop PCs | Desktop height |
--_xl-w |
Large screens | Extra-large screen width |
--_xl-h |
Large screens | Extra-large screen height |
--_hh-w |
Handheld devices | Handheld device width |
--_hh-h |
Handheld devices | Handheld device height |
--_tb-w |
Tablet devices | Tablet device width |
--_tb-h |
Tablet devices | Tablet device height |
--_dt-w |
Desktop devices | Desktop device width |
--_dt-h |
Desktop devices | Desktop device height |
Implementation Notes:
- For top-to-bottom flow layouts, typically only container height needs configuration
- Width variables maintain responsive behavior while allowing device-specific overrides
- Height variables enable vertical dimension control across device types
Preventing Overflow
To prevent overflow in non-scrolling directions using overflow-*:hidden, specify the scroll axis with axis=x or axis=y:
axis="x": Horizontal scrolling with vertical overflow hiddenaxis="y": Vertical scrolling with horizontal overflow hidden
- Output
- HTML
-
The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.
The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.
-