import ScrollPanel from 'primevue/scrollpanel';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/scrollpanel/scrollpanel.min.js"></script>
ScrollPanel usage is similar to any container element.
<ScrollPanel style="width: 100%; height: 200px">
content
</ScrollPanel>
Look and feel can easily be customized, here is an example with custom scrollbars.
<ScrollPanel style="width: 100%; height: 200px" class="custom">
content
</ScrollPanel>
.custom .p-scrollpanel-wrapper {
border-right: 9px solid #f4f4f4;
}
.custom .p-scrollpanel-bar {
background-color: #1976d2;
opacity: 1;
transition: background-color .3s;
}
.custom .p-scrollpanel-bar:hover {
background-color: #135ba1;
}
Step factor is 5px by default and can be customized with step option.
<ScrollPanel style="width: 100%; height: 200px" :step="10"3>
content
</ScrollPanel>
Any property such as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| step | number | 5 | Step factor to scroll the content while pressing the arrow keys. |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-scrollpanel | Container element. |
| p-scrollpanel-wrapper | Wrapper of content section. |
| p-scrollpanel-content | Content section. |
| p-scrollpanel-bar | Scrollbar handle. |
| p-scrollpanel-bar-x | Scrollbar handle of a horizontal bar. |
| p-scrollpanel-bar-y | Scrollbar handle of a vertical bar |
Scrollbars of the ScrollPanel has a scrollbar role along with the aria-controls attribute that refers to the id of the scrollable content container and the aria-orientation to indicate the orientation of scrolling.
| Key | Function |
|---|---|
| down arrow | Scrolls content down when vertical scrolling is available. |
| up arrow | Scrolls content up when vertical scrolling is available. |
| left | Scrolls content left when horizontal scrolling is available. |
| right | Scrolls content right when horizontal scrolling is available. |
None.