DEV Community

loading...
Cover image for Angular ScrollPanel

Angular ScrollPanel

primetek profile image PrimeTek ・1 min read

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';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
.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;
        }
    }
}
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 PrimeNG ScrollPanel showcase for demos and documentation.

Discussion (0)

Forem Open with the Forem app