Pri-ng-scrollbar NPM

pri-ng-scrollbar version	angular version
7.x	>= 11.x
6.x	>= 11.x
5.x	10.x
4.x	9.x
3.x	8.x
2.x	7.x

Custom scrollbar with native scrolling mechanism which runs outside of the angular change detection, which results in better performance. Fallback for mobile devices and browser which are not supporting custom scrollbars.

Live Demo

Angular

Web-Component

** web-component support is dropped with version >= 7.x

More

Angular

Installation

NPM

npm install --save pri-ng-scrollbar @angular/cdk

Usage

Import PriScrollbarModule in your module

import { PriScrollbarModule } from 'pri-ng-scrollbar';

@NgModule({
  imports: [
    PriScrollbarModule
  ]
})

In your template

<pri-scrollbar>
  <!-- Content -->
</pri-scrollbar>

Options

Scrollbar component inputs

Inputs	Type / Values	Default value	Description
overflowX	'auto', 'scroll', 'native-auto', 'native-scroll', 'hidden'	'auto'	Horizontal scrollbar overflow
overflowY	'auto', 'scroll', 'native-auto', 'native-scroll', 'hidden'	'auto'	Vertical scrollbar
xPosition	'top', 'bottom'	'bottom'	Position of the horizontal scrollbar
xPosition	'left', 'right'	'right'	Position of the vertical scrollbar
marginsX	string (format: '0 0 0 0' or '0 0' or '0 0')	4 4	Margins to position for the horizontal scrollbar. (top right bottom left) or (top/bottom left/right) or (top/bottom/left/right)
marginsY	string (format: '0 0 0 0' or '0 0' or '0 0')	4 12	Margins to position for the vertical scrollbar. (top right bottom left) or (top/bottom left/right) or (top/bottom/left/right)

Auto fallback to native scrollbars for mobile devices, bec. its not possible to show / hide custom scrollbars.
pri-scrollbar size will auto resize (height) based on its content, until it reaches the max available height. !!! This will only work if "overflowX" is set to "hidden" !!!

Styling

If you want a padding on the pri-scrollbar content, you have to use the following css variable on your pri-scrollbar

pri-scrollbar {
  --padding: 10px;
}

styling / theming with scss is similar to angular material.

add to your style

@import '~pri-ng-scrollbar/theming';

$vertical-thumb-color: #444;
// (optional) if vertical-thumb-size set and horizontal-thumb-color is not set, horizontal-thumb size will be set to vertical-thumb-color
$horizontal-thumb-color: #444;
// (optional)
$vertical-thumb-size: 20px;
// if vertical-thumb-size set and horizontal-thumb-size is not set, horizontal-thumb size will be set to vertical-thumb-size
$horizontal-thumb-size: 20px;

//creates palette
$custom-scrollbar-palette: pri-scrollbar-palette($vertical-thumb-color, $horizontal-thumb-color, $vertical-thumb-size, $horizontal-thumb-size);

//now use your palette for the theme
@include pri-scrollbar-theme($custom-scrollbar-palette);



/********************* extended styling *************************/

/**  
 * will set color and size for both thumbs
 * $custom-scrollbar-palette: pri-scrollbar-palette($vertical-thumb-color, null, $vertical-thumb-size, null);
 * only sets color
 * $custom-scrollbar-palette: pri-scrollbar-palette($vertical-thumb-color);
 */


/**
 * if you want change the thumb style i.e. border radius, border, border color you can add 'map' as pri-scrollbar-theme as parameter
 * !!! The following part is optional !!! 
 */
 
// horizontal thumb style
$horizontal-thumb-style: (
  border-radius: 0,
  border: 1 px solid white
);
$vertical-thumb-style: (
  border-radius: 0,
  border: 1 px solid white
);

@include pri-scrollbar-theme($custom-theme-palette, $horizontal-thumb-style, $vertical-thumb-style);