wts-scroll

# 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>

Example

Stackblitz Demo