<vaadin-scroller>
`<vaadin-scroller>` provides a simple way to enable scrolling when its content is overflowing.
- Category
- Layout
- Built with
Lit- Library
Vaadin
- Author
Vaadin
- Package
-
@vaadin/scroller - Component size
- 2.0 kB JS (minified + gzipped, JS includes dependencies beyond the library)
- Library size
- 19.9 kB JS (shared by every Vaadin component, loaded once per page)
- Popular
- 3 out of 5
- Downloads
- 60,325/week · jsDelivr 2,417 hits/month (whole @vaadin/scroller package)
- Latest stable version
25.3.2- Last published
- Component last changed
- (in
25.3.0) - License
- Apache-2.0
<vaadin-scroller> provides a simple way to enable scrolling when its content is overflowing.
<vaadin-scroller>
<div>Content</div>
</vaadin-scroller>
Styling
The following state attributes are available for styling:
| Attribute | Description |
|---|---|
focus-ring |
Set when the element is focused using the keyboard. |
focused |
Set when the element is focused. |
overflow |
Set to top, bottom, start, end, all of them, or none. |
Built-in Theme Variants
<vaadin-scroller> supports the following theme variants:
| Theme variant | Description |
|---|---|
theme="overflow-indicators" |
Shows visual indicators at the top and bottom when the content is scrolled |
theme="overflow-indicator-top" |
Shows the visual indicator at the top when the content is scrolled |
theme="overflow-indicator-top-bottom" |
Shows the visual indicator at the bottom when the content is scrolled |
Custom CSS Properties
The following custom CSS properties are available for styling:
| Custom CSS property |
|---|
--vaadin-scroller-overflow-indicator-color |
--vaadin-scroller-overflow-indicator-height |
--vaadin-scroller-padding-block |
--vaadin-scroller-padding-inline |
See Styling Components documentation.
Attributes
scroll-directiontheme