| 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.
Angular
Web-Component
** web-component support is dropped with version >= 7.x
More
NPM
npm install --save pri-ng-scrollbar @angular/cdkImport PriScrollbarModule in your module
import { PriScrollbarModule } from 'pri-ng-scrollbar';
@NgModule({
imports: [
PriScrollbarModule
]
})In your template
<pri-scrollbar>
<!-- Content -->
</pri-scrollbar>| 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" !!!
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);
This project uses the Angular CLI for building the library
$ npm run build:lib
$ npm run startor if you want to get live updates on lib source changes
Terminal 1:
$ npm run start:lib Terminal 2:
$ npm run startIf you identify any errors in the library, or have an idea for an improvement, please open an issue.
- add experimental version for ivy projects
- Rework the web-component creation when angular ivy is ready. Reduces bundle size.
- Mario Prieschl Github
- Inspired by ngx-scrollbar.