Angular Scrollbar

Angular Bootstrap 5 Scrollbar

Scrollbar method which allows you to create a custom scrollbar.

Note: Read the API tab to find all available options and advanced customization

Basic example

Scrollbar is initialized automatically when you add mdbScrollbar directive to your container.

... 
<div mdbScrollbar style="position: relative; width: 600px; height: 400px;">
  <img
    src="https://mdbootstrap.com/img/new/slides/041.webp"
    alt="..."
    style="height: 700px; width: 1000px;"
  />
</div>

Config

You can change scrollbar configuration options by passing new configuration object to the config input.

... 
<div mdbScrollbar [config]="config" style="position: relative; width: 600px; height: 400px;">
  <img
    src="https://mdbootstrap.com/img/new/slides/041.webp"
    alt="..."
    style="height: 700px; width: 1000px;"
  />
</div>
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  config = {
    handlers: ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch'],
    wheelSpeed: 1,
    wheelPropagation: true,
    swipeEasing: true,
    minScrollbarLength: null,
    maxScrollbarLength: null,
    scrollingThreshold: 1000,
    useBothWheelAxes: false,
    suppressScrollX: false,
    suppressScrollY: false,
    scrollXMarginOffset: 0,
    scrollYMarginOffset: 0,
  };
}

Events

Available scrollbar outputs:

  • scrollX
  • scrollY
  • scrollUp
  • scrollDown
  • scrollLeft
  • scrollRight
  • xReachEnd
  • yReachEnd
  • xReachStart
  • yReachStart

Example

scrollX
... 
<div
  mdbScrollbar
  (scrollY)="onScrollY()"
  (scrollX)="onScrollX()"
  (scrollUp)="onScrollUp()"
  (scrollDown)="onScrollDown()"
  (scrollLeft)="onScrollLeft()"
  (scrollRight)="onScrollRight()"
  (yReachStart)="onYReachStart()"
  (yReachEnd)="onYReachEnd()"
  (xReachStart)="onXReachStart()"
  (xReachEnd)="onXReachEnd()"
  style="position: relative; width: 600px; height: 400px;"
>
  <img
    src="https://mdbootstrap.com/img/new/slides/041.webp"
    alt="..."
    style="height: 700px; width: 1000px;"
  />
</div>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  onScrollY(): void {
    console.log('scroll y');
  }

  onScrollX(): void {
    console.log('scroll x');
  }

  onScrollUp(): void {
    console.log('scroll up');
  }

  onScrollDown(): void {
    console.log('scroll down');
  }

  onScrollLeft(): void {
    console.log('scroll left');
  }

  onScrollRight(): void {
    console.log('scroll right');
  }

  onYReachStart(): void {
    console.log('y reach start');
  }

  onYReachEnd(): void {
    console.log('y reach end');
  }

  onXReachStart(): void {
    console.log('x reach start');
  }

  onXReachEnd(): void {
    console.log('x reach end');
  }
}

Angular Scrollbar - API

Import

import { MdbScrollbarModule } from 'mdb-angular-ui-kit/scrollbar';
…
@NgModule ({
  ...
  imports: [MdbScrollbarModule],
  ...
})

Following options can be added to the [config] input.

Options

Name Type Default Description
handlers string[] ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch'] It is a list of handlers to scroll the element.
wheelSpeed number 1 The scroll speed applied to mousewheel event.
wheelPropagation boolean true If this option is true, when the scroll reaches the end of the side, mousewheel event will be propagated to parent element.
swipeEasing boolean true If this option is true, swipe scrolling will be eased.
minScrollbarLength boolean null When set to an integer value, the thumb part of the scrollbar will not shrink below that number of pixels.
maxScrollbarLength boolean null When set to an integer value, the thumb part of the scrollbar will not expand over that number of pixels.
scrollingThreshold number 1000 This sets threshold for ps--scrolling-x and ps--scrolling-y classes to remain. In the default CSS, they make scrollbars shown regardless of hover state. The unit is millisecond.
suppressScrollX boolean false When set to true, the scrollbar in X-axis will not be available, regardless of the content width.
suppressScrollY boolean false When set to true, the scroll bar in Y-axis will not be available, regardless of the content height.
scrollXMarginOffset number 0 The number of pixels the content width can surpass the container width without enabling the X-axis scroll bar. Allows some "wiggle room" or "offset break", so that X-axis scroll bar is not enabled just because of a few pixels.
scrollYMarginOffset number 0 The number of pixels the content width can surpass the container width without enabling the X-axis scroll bar. Allows some "wiggle room" or "offset break", so that X-axis scroll bar is not enabled just because of a few pixels. 
<div
  mdbScrollbar
  [config]="config"
  style="position: relative; width: 600px; height: 400px"
>
  <img
    src="https://mdbootstrap.com/img/new/slides/041.webp"
    alt="..."
    style="height: 700px; width: 1000px"
  />
</div>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  config = {
    handlers: ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch'],
    wheelSpeed: 1,
    wheelPropagation: true,
    swipeEasing: true,
    minScrollbarLength: null,
    maxScrollbarLength: null,
    scrollingThreshold: 1000,
    useBothWheelAxes: false,
    suppressScrollX: false,
    suppressScrollY: false,
    scrollXMarginOffset: 0,
    scrollYMarginOffset: 0,
  };
}

Outputs

Name Type Description
scrollX EventEmitter<any> This event fires when the x-axis is scrolled in either direction.
scrollY EventEmitter<any> This event fires when the y-axis is scrolled in either direction.
scrollUp EventEmitter<any> This event fires when scrolling upwards.
scrollDown EventEmitter<any> This event fires when scrolling downwards.
scrollLeft EventEmitter<any> This event fires when scrolling to the left.
scrollRight EventEmitter<any> This event fires when scrolling to the right.
yReachStart EventEmitter<any> This event fires when scrolling to the right.
xReachStart EventEmitter<any> This event fires when scrolling reaches the start of the x-axis.
xReachEnd EventEmitter<any> This event fires when scrolling reaches the end of the x-axis.
yReachEnd EventEmitter<any> This event fires when scrolling reaches the end of the y-axis (useful for infinite scroll). 
<div
  mdbScrollbar
  (scrollY)="onScrollY($event)"
  style="position: relative; width: 600px; height: 400px"
>
  <img
    src="https://mdbootstrap.com/img/new/slides/041.webp"
    alt="..."
    style="height: 700px; width: 1000px"
  />
</div>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  onScrollY(event:any): void {
    console.log('scroll y', event);
  }
}