Angular ScrollPanel

Angular ScrollPanel is a cross browser, lightweight and themable alternative to native browser scrollbar.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {ScrollPanelModule} from 'primeng/scrollpanel';

Getting Started

ScrollPanel is defined with p-scrolPanel element having dimensions for the scrollable viewport.

<p-scrollPanel [style]="{width: '100%', height: '200px'}">
    Content
</p-scrollPanel>

Customization

Look and feel can easily be customized, here is an example with a background and blue handle.

<p-scrollPanel [style]="{width: '100%', height: '200px'}" styleClass="custom">
    Content
</p-scrollPanel>

.p-scrollpanel {
    p {
        padding: .5rem;
        line-height: 1.5;
        margin: 0;
    }

    &.custombar1 {
        .p-scrollpanel-wrapper {
            border-right: 9px solid var(--layer-1);
        }

        .p-scrollpanel-bar {
            background-color: var(--primary-color);
            opacity: 1;
            transition: background-color .2s;

            &:hover {
                background-color: #007ad9;
            }
        }
    }

    &.custombar2 {
        .p-scrollpanel-wrapper {
            border-right: 9px solid var(--layer-1);
            border-bottom: 9px solid var(--layer-1);
        }

        .p-scrollpanel-bar {
            background-color: var(--layer-2);
            border-radius: 0;
            opacity: 1;
            transition: background-color .2s;
        }
    }
}

Theming

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

Resources

Visit the PrimeNG ScrollPanel showcase for demos and documentation.