Theming documentation for ScrollArea component
List of class names used in the styled mode.
| className | description |
|---|---|
| p-scrollarea | Class name of the root element |
| p-scrollpanel-content-container | Class name of the viewport element |
| p-scrollpanel-content | Class name of the content element |
| p-scrollpanel-bar-x | Class name of the thumb x element |
| p-scrollpanel-bar-y | Class name of the thumb y element |
List of design tokens.
| token | CSS Variable | description |
|---|---|---|
| scrollpanel.transition.duration | --p-scrollpanel-transition-duration | Transition duration of root |
| scrollpanel.bar.size | --p-scrollpanel-bar-size | Size of bar |
| scrollpanel.bar.border.radius | --p-scrollpanel-bar-border-radius | Border radius of bar |
| scrollpanel.bar.focus.ring.width | --p-scrollpanel-bar-focus-ring-width | Focus ring width of bar |
| scrollpanel.bar.focus.ring.style | --p-scrollpanel-bar-focus-ring-style | Focus ring style of bar |
| scrollpanel.bar.focus.ring.color | --p-scrollpanel-bar-focus-ring-color | Focus ring color of bar |
| scrollpanel.bar.focus.ring.offset | --p-scrollpanel-bar-focus-ring-offset | Focus ring offset of bar |
| scrollpanel.bar.focus.ring.shadow | --p-scrollpanel-bar-focus-ring-shadow | Focus ring shadow of bar |
| scrollpanel.bar.background | --p-scrollpanel-bar-background | Background of bar |
Theming is implemented with the pass through properties in unstyled mode.