wts-scroll
v2.0.0
Published
The Angular Custom Scrollbar Library is a powerful tool for enhancing the scrolling experience within your Angular applications. This library allows you to create highly customizable and stylish scrollbars, giving you full control over the look and feel o
Downloads
97
Maintainers
Readme
# Angular Custom Scrollbar v-17+
The Angular Custom Scrollbar Library is a powerful tool for enhancing the scrolling experience within your Angular applications. This library allows you to create highly customizable and stylish scrollbars, giving you full control over the look and feel of your application's scrollable content.
Install
npm install --save wts-scroll
import { Component } from "@angular/core";
import { WtsScrollComponent, ScrollBarOptions } from "wts-scroll";
@Component({
selector: "<COMPONENT-SELECTOR>",
standalone: true,
imports: [WtsScrollComponent],
templateUrl: "<COMPONENT>.html",
styleUrl: "<COMPONENT>.scss",
})
export class MyComponent {
@ViewChild("customScrollBar") private customScrollBar!: WtsScrollComponent;
protected itemsCount = 10;
onReachEnd(): void {
// this.itemsCount < 40 && (this.itemsCount += this.itemsCount);
console.log('onReachEnd');
}
HTML
<div class="wts-scroll">
<div style="height: 100%; width: 100%;">
<wts-scroll class="_scroll" (onReachEnd)="onReachEnd()">
<ul>
@for (item of [].constructor(itemsCount); track $index) {
<li>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, eaque deserunt veritatis iusto fugiat
autem consequuntur.
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, eaque deserunt veritatis iusto fugiat
autem consequuntur.
</div>
</li>
}
</ul>
</wts-scroll>
</div>
</div>