Pure ngx scrollbars without dependencies to jQuery or other scroll librarys, to bind customized scrollbars to every scrollable html element like scrollable div or textarea for example or a virtual view like a canvas.
If you identify any errors in the library, or have an idea for an improvement, please open an issue or create a pull request.
-Installation
-Usage
-Vertical Scrollbar
-Horizontal Scrollbar
-Docs
-Author
-Credit
npm
# angular 8
npm i --save ngx-customscrollbar# angular 7
npm i --save ngx-customscrollbar@1.2.3Import NgxCustomScrollbarModule in your module
import { NgxCustomScrollbarModule } from "ngx-customscrollbar";
@NgModule({
imports: [
// ...
NgxCustomScrollbarModule
]
})Component
import { Component } from "@angular/core";
import { ViewportControl } from "ngx-customscrollbar";
@Component({
selector: "app-vertical-scroll",
templateUrl: "vertical-scroll.component.html",
styleUrls: ["./vertical-scroll.component.scss"],
viewProviders: [ViewportControl]
})
export class VerticalScrollComponent {
// generate array with 300 items
public items: Array<string | number> =
Array.from({ length: 300 }, (val, index) => index);
}Template
<div class="scrollWrapper">
<div class="scrollView" ngxCustomScrollbarScrollable>
<div *ngFor="let item of items">Lorem Ipsum {{item}}</div>
</div>
<ngx-customscrollbar></ngx-customscrollbar>
</div>SCSS
@import "~ngx-customscrollbar/scss/common";
@import "~ngx-customscrollbar/scss/ngx-customscrollbars.theme"
.scrollWrapper {
@include ngxCustomScrollbarsTheme();
display: flex;
flex-direction: row;
height: 500px;
overflow: hidden;
.scrollView {
flex: 1;
overflow-y: auto;
}
}Component
import { Component } from "@angular/core";
import { ViewportControl } from "ngx-customscrollbar";
@Component({
selector: "app-vertical-scroll",
templateUrl: "vertical-scroll.component.html",
styleUrls: ["./vertical-scroll.component.scss"],
viewProviders: [ViewportControl]
})
export class VerticalScrollComponent {
public items: Array<string | number> =
Array.from({ length: 20 }, (val, index) => index);
}Template
<div class="scrollWrapper">
<div class="scrollView" ngxCustomScrollbarScrollable>
<div *ngFor="let item of items">Lorem Ipsum {{item}}</div>
</div>
<ngx-customscrollbar [scrollDirection]="horizontal"></ngx-customscrollbar>
</div>SCSS
@import "~ngx-customscrollbar/scss/common";
@import "~ngx-customscrollbar/scss/ngx-customscrollbars.theme"
.scrollWrapper {
// load scrollbars theme here
@include ngxCustomScrollbarsTheme();
display: flex;
flex-direction: row;
height: 500px;
overflow: hidden;
.scrollView {
flex: 1;
overflow-x: auto;
> div {
white-space: nowrap;
width: 4000px;
display: flex;
justify-content: space-between;
&:after {
content: "end of scroll";
}
}
}
}Q2g - Ralf Hannuschka Github
- Inspired by ngx-scrollbar