DEV Community

loading...
Cover image for Vue3 ScrollPanel

Vue3 ScrollPanel

primetek profile image PrimeTek ・1 min read

Vue3 ScrollPanel is a cross browser, lightweight and themable alternative to native browser scrollbar.
It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import ScrollPanel from 'primevue/scrollpanel';
Enter fullscreen mode Exit fullscreen mode

Getting Started

ScrollPanel usage is similar to any container element.

<ScrollPanel style="width: 100%; height: 200px">
    content
</ScrollPanel>
Enter fullscreen mode Exit fullscreen mode

Customization

Look and feel can easily be customized, here is an example with custom scrollbars.

<ScrollPanel style="width: 100%; height: 200px" class="custom">
    content
</ScrollPanel>
Enter fullscreen mode Exit fullscreen mode
.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;
}
Enter fullscreen mode Exit fullscreen mode

Theming

ScrollPanel supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue ScrollPanel showcase for demos and documentation.

Discussion (0)

pic
Editor guide