@terminus/ui-scrollbars

Scrollbars

Table of Contents

• Installation
  • CSS imports
• Usage
  • Disable
  • Update
  • Manual Position Control
    • Scroll to fixed location
    • Scroll to x/y location
    • Scroll to element
  • Events

Installation

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

ng add @terminus/ui-scrollbars

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