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;
  options: ScrollBarOptions = {
    direction: "vertical",
  };

  protected _onReachedAt(e: { reachedAt: string }): void {}
  // this.customScrollBar.scrollToBottom()
  // this.customScrollBar.scrollToTop()
  // this.customScrollBar.scrollToLeft()
  // this.customScrollBar.scrollToRight()
  // this.customScrollBar.scrollTo({left?, right?})
}

HTML

<wts-scroll [options]="options" (onReachedAt)="_onReachedAt($event)" #customScrollBar>
  <div #wtsScrollContainer>
    @for (item of [1,2,3,4,5,6,7,8,89,9,09,0,0,0,24,4,45,566]; track $index) {
    <div style="padding: 10px; height: 90px; border: solid 1px; margin-bottom: 5px; border-radius: 10px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est nam commodi modi ut pariatur esse voluptas cum! Eum nesciunt, molestiae labore ipsa, non tenetur doloribus, repellendus iure quos animi officia! Lorem ipsum dolor sit amet consectetur adipisicing elit. Est nam commodi modi ut pariatur esse voluptas cum! Eum nesciunt, molestiae labore ipsa, non tenetur doloribus, repellendus iure quos animi officia! LAST</div>
    }
  </div>
</wts-scroll>

Properties

Name	Description
(Optional) options: ScrollBarOptions	*Default: {}*

Example

Stackblitz Demo