Smooth Scroll

Smooth scroll feature is built-in NgScrollbar component, but if you like to use this feature outside the NgScrollbar component, then use SmoothScrollModule which is available as an independent module. it allows you to use smooth scroll functions on any scrollable element.

SmoothScrollModule provides:

• SmoothScroll a directive for template usage
• SmoothScrollManager a service for code usage

Usage

Import SmoothScrollModule in your module

import { SmoothScrollModule } from 'ngx-scrollbar/smooth-scroll';

@NgModule({
  imports: [
    SmoothScrollModule
  ]
})

SmoothScroll directive example

<div smoothScroll #scrollable="smoothScroll" class="scrollable-container">
  <div>{{scrollableContent}}</div>
</div>

<button (click)="scrollable.scrollTo({ bottom: 0, duration: 500 })">Scroll to bottom</button>

SmoothScrollManager service example

@Component({...})
export class FooComponent {
  constructor(private el: ElementRef, private smoothScroll: SmoothScrollManager) {
  }
  scrollTop() {
    this.smoothScroll.scrollTo(this.el.nativeElement, { top: 0, duration: 800 });
  }
}

See all ScrollTo Functions.