Scroller
Description
<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 | Description |
|---|---|
--vaadin-scroller-padding-block |
The CSS padding applied to top and bottom edges |
--vaadin-scroller-padding-inline |
The CSS padding applied to left and right edges |
See Styling Components documentation.
Properties
scrollDirection
Type: "horizontal" | "none" | "vertical" | undefined
This property indicates the scroll direction. Supported values are vertical, horizontal, none.
When scrollDirection is undefined scrollbars will be shown in both directions.