Vue3 ScrollPanel is a cross browser, lightweight and themable alternative to native browser scrollbar.
It supports Vue 3 with <a target="_blank" href="https://primefaces.org/primevue/showcase">PrimeVue 3</a> and Vue 2 with <a target="_blank" href="https://primefaces.org/primevue/showcase-v2">PrimeVue 2</a>.
<h3 id="setup">Setup</h3>
Refer to PrimeVue <a target="_blank" href="https://primefaces.org/primevue/showcase/#/setup">setup documentation</a> for download and installation steps for your environment such as Vue CLI, Vite or browser.
<h3 id="import">Import</h3>
<pre><code class="lang-js">import ScrollPanel from 'primevue/scrollpanel';
</code></pre>
<h3 id="getting-started">Getting Started</h3>
ScrollPanel usage is similar to any container element.
<pre><code class="lang-html">&lt;ScrollPanel style="width: 100%; height: 200px"&gt;
 content
&lt;/ScrollPanel&gt;
</code></pre>
<h3 id="customization">Customization</h3>
Look and feel can easily be customized, here is an example with custom scrollbars.
<pre><code class="lang-html">&lt;ScrollPanel style="width: 100%; height: 200px" class="custom"&gt;
 content
&lt;/ScrollPanel&gt;
</code></pre>
<pre><code class="lang-css">.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;
}
</code></pre>
<h3 id="theming">Theming</h3>
ScrollPanel supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primevue/showcase/#/theming">Designer</a> tool.
<h3 id="resources">Resources</h3>
Visit the PrimeVue <a target="_blank" href="https://primefaces.org/primevue/showcase/#/scrollpanel">ScrollPanel</a> showcase for demos and documentation.

Vue3 ScrollPanel is a cross browser, lightweight and themable alternative to native browser scrollbar.
It supports Vue 3 with [PrimeVue 3](https://primefaces.org/primevue/showcase) and Vue 2 with [PrimeVue 2](https://primefaces.org/primevue/showcase-v2).

### Setup

Refer to PrimeVue [setup documentation](https://primefaces.org/primevue/showcase/#/setup) for download and installation steps for your environment such as Vue CLI, Vite or browser.

### Import

```js
import ScrollPanel from 'primevue/scrollpanel';
```

### Getting Started

ScrollPanel usage is similar to any container element.

```html
<ScrollPanel style="width: 100%; height: 200px">
 content
</ScrollPanel>
```

### Customization

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

```html
<ScrollPanel style="width: 100%; height: 200px" class="custom">
 content
</ScrollPanel>
```

```css
.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;
}
```

### Theming

ScrollPanel supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primevue/showcase/#/theming) tool.

### Resources

Visit the PrimeVue [ScrollPanel](https://primefaces.org/primevue/showcase/#/scrollpanel) showcase for demos and documentation.