Table of Contents

• Installation
  • Packages that need to be installed
  • Modules that need to be in NgModule
  • CSS imports
• Usage
  • Disable
  • Update
  • Manual Position Control
    • Scroll to fixed location
    • Scroll to x/y location
    • Scroll to element
  • Events

Installation

Packages that need to be installed

• @angular/cdk
• @angular/common
• @angular/core
• @angular/flex-layout
• @angular/forms
• @angular/platform-browser
• @terminus/design-tokens
• @terminus/fe-utilities
• @terminus/ui-utilities
• @terminus/ui-scrollbars
• date-fns
• ngx-perfect-scrollbar

Use the ng add command to quickly install all the needed dependencies:

ng add @terminus/ui-scrollbars

Modules that need to be in NgModule

• TsScrollbarsModule

CSS imports

In your top level stylesheet, add these imports:

@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';

Usage

You must set a fixed height and/or width to enable scrollbars (otherwise the browser will just continue making the container larger to fit the content).

<ts-scrollbars style="height: 300px; width: 400px;">
  ...
</ts-scrollbars>

Disable

The scrollbars can be disabled dynamically if needed:

<ts-scrollbars [isDisabled]="true">
  ...
</ts-scrollbars>

Update

If the scrollbars content is dynamically updated, you will need to update the scrollbars instance:

<!-- Get a reference to the component class -->
<ts-scrollbars #scrollbars="tsScrollbars">
  ...
</ts-scrollbars>

...

@ViewChild(TsScrollbarsComponent, {static: false})
public scrollbars!: TsScrollbarsComponent;

myUpdate() {
  // Update the content
  this.updateScrollContent();

  // Update the scrollbars
  this.scrollbars.update();
}

Manual Position Control

Scrolling methods can be called directly once a reference to the component is attained:

<!-- Get a reference to the component class -->
<ts-scrollbars #scrollbars="tsScrollbars">
  ...
</ts-scrollbars>

...
// A reference to the component instance:
@ViewChild(TsScrollbarsComponent, {static: false})
public scrollbars!: TsScrollbarsComponent;
...

The following scroll examples will assume that a reference has already been created.

Scroll to fixed location

@ViewChild(TsScrollbarsComponent, {static: false})
public scrollbars!: TsScrollbarsComponent;

scrollToTop() {
  // Scroll the container to the very top
  this.scrollbars.scrollToTop();
}

Available fixed location methods:

| Method | |--------------------| | scrollToBottom() | | scrollToLeft() | | scrollToRight() | | scrollToTop() |

Scroll to x/y location

Scroll the container to a specific x/y location:

@ViewChild(TsScrollbarsComponent, {static: false})
public scrollbars!: TsScrollbarsComponent;

scrollToCoordinates() {
  //                       x    y    speed
  this.scrollbars.scrollTo(100, 250, 200);
}

Scroll to element

The component can scroll a nested element to the top of the scroll container:

@ViewChild(TsScrollbarsComponent, {static: false})
public scrollbars!: TsScrollbarsComponent;

scrollToElement() {
  // This supports any string that can be passed to `querySelector()`
  this.scrollbars.scrollToElement('.my-class');
}

Events

<ts-scrollbars (scrollDown)="myFunc($event)">
  ...
</ts-scrollbars>

| Available events | |------------------| | scrollDown | | scrollLeft | | scrollRight | | scrollUp | | scrollX | | scrollY | | xReachEnd | | xReachStart | | yReachEnd | | yReachStart |