Scroll Status

Angular Bootstrap 5 Scroll Status plugin

Scroll Status plugin creates progress bar indicating page or component scroll level.

Angular Scroll status for the latest Bootstrap 5. Creates a progress bar indicating page or component scroll level.

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

Basic example

The Scroll Status Service provides method to calculate scroll level of page or component.

Set #container template variable on element of your choice and subscribe to getScrollPercentage(container) to get scroll level in return. Set the .scroll-status-progress element's [style.width.%] attribute to the returned value from service in order to dynamically update scroll progress bar.

Some content here

<section class="border w-100 p-4">
  <div class="border w-100" style="height: 100px; overflow-y: auto" #container>
    <div class="scroll-status">
      <div
        class="scroll-status-progress bg-primary"
        style="height: 10px"
        [style.width.%]="scrollPercentage$ | async"
      ></div>
    </div>

    <div style="height: 400px; width: 100%">
      <p class="mt-2" style="text-align: center">Some content here</p>
    </div>
  </div>
</section>
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Observable } from 'rxjs';
import { MdbScrollStatusService } from 'mdb-angular-scroll-status';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  @ViewChild('container', { static: true }) container!: ElementRef;

  scrollPercentage$: Observable<number> | null = null;

  constructor(private _scrollStatusService: MdbScrollStatusService) {}

  ngOnInit(): void {
    this.scrollPercentage$ = this._scrollStatusService.getScrollPercentage(
      this.container.nativeElement
    );
  }
}
.scroll-status {
  position: sticky;
  z-index: 1020;
  background: #ccc;
  top: 0%;
}

.scroll-status-progress {
  width: 0%;
}

Global example

The getScrollPercentage() method by default calculates the scroll for window or document if function parameter is not provided.

<div class="container fixed-top" style="top: 2rem">
  <div class="scroll-status">
    <div
      class="scroll-status-progress bg-primary"
      style="height: 10px"
      [style.width.%]="scrollPercentage$ | async"
    ></div>
  </div>
</div>
<div
  style="height: 2160px"
  class="d-flex align-items-center justify-content-center"
>
  <p>Content</p>
</div>
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { MdbScrollStatusService } from 'mdb-angular-scroll-status';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  scrollPercentage$: Observable<number> | null = null;

  constructor(private _scrollStatusService: MdbScrollStatusService) {}

  ngOnInit(): void {
    this.scrollPercentage$ = this._scrollStatusService.getScrollPercentage();
  }
}
.scroll-status {
position: sticky;
z-index: 1020;
background: #ccc;
top: 0%;
}

.scroll-status-progress {
width: 0%;
}

Styling

Color

Easily change the color of Scroll Status with .bg-* color classes.

Some content here

<section class="border w-100 p-4">
  <div class="border w-100" style="height: 100px; overflow-y: auto" #container>
    <div class="scroll-status">
      <div
        class="scroll-status-progress bg-success"
        style="height: 10px"
        [style.width.%]="scrollPercentage$ | async"
      ></div>
    </div>

    <div style="height: 400px; width: 100%">
      <p class="mt-2" style="text-align: center">Some content here</p>
    </div>
  </div>
</section>
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Observable } from 'rxjs';
import { MdbScrollStatusService } from 'mdb-angular-scroll-status';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  @ViewChild('container', { static: true }) container!: ElementRef;

  scrollPercentage$: Observable<number> | null = null;

  constructor(private _scrollStatusService: MdbScrollStatusService) {}

  ngOnInit(): void {
    this.scrollPercentage$ = this._scrollStatusService.getScrollPercentage(
      this.container.nativeElement
    );
  }
}
.scroll-status {
  position: sticky;
  z-index: 1020;
  background: #ccc;
  top: 0%;
}

.scroll-status-progress {
  width: 0%;
}

Position

Change vertical of Scroll Status position by adding styling rule style="top: 10%" to .scroll-status element.

Some content here

<div class="border" style="height: 100px; overflow-y: auto;" #container>
  <div class="scroll-status" style="top: 10%">
    <div class="scroll-status-progress bg-success"
    style="height: 10px"
    [style.width.%]="scrollPercentage$ | async"></div>
  </div>

  <div style="height: 400px; width: 100%;">
    <p class="mt-2" style="text-align: center;">Some content here</p>
  </div>
</div>
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Observable } from 'rxjs';
import { MdbScrollStatusService } from 'mdb-angular-scroll-status';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  @ViewChild('container', { static: true }) container!: ElementRef;

  scrollPercentage$: Observable<number> | null = null;

  constructor(private _scrollStatusService: MdbScrollStatusService) {}

  ngOnInit(): void {
    this.scrollPercentage$ = this._scrollStatusService.getScrollPercentage(
      this.container.nativeElement
    );
  }
}
.scroll-status {
  position: sticky;
  z-index: 1020;
  background: #ccc;
  top: 0%;
}

.scroll-status-progress {
  width: 0%;
}

Height

Change height of Scroll Status by adding styling rule style="height: 20px". to .scroll-status-progress element

Some content here

<div class="border" style="height: 100px; overflow-y: auto;" #container>
  <div class="scroll-status">
    <div class="scroll-status-progress bg-success"
    style="height: 20px"
    [style.width.%]="scrollPercentage$ | async"></div>
  </div>

  <div style="height: 400px; width: 100%;">
    <p class="mt-2" style="text-align: center;">Some content here</p>
  </div>
</div>
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Observable } from 'rxjs';
import { MdbScrollStatusService } from 'mdb-angular-scroll-status';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  @ViewChild('container', { static: true }) container!: ElementRef;

  scrollPercentage$: Observable<number> | null = null;

  constructor(private _scrollStatusService: MdbScrollStatusService) {}

  ngOnInit(): void {
    this.scrollPercentage$ = this._scrollStatusService.getScrollPercentage(
      this.container.nativeElement
    );
  }
}
.scroll-status {
  position: sticky;
  z-index: 1020;
  background: #ccc;
  top: 0%;
}

.scroll-status-progress {
  width: 0%;
}

Modal

To create modal you can follow our MDB Angular Modal documentation.

One-time modal

Some content here

<section class="border w-100 p-4">
  <div class="border w-100" style="height: 100px; overflow-y: auto" #container>
    <div class="scroll-status">
      <div
        class="scroll-status-progress bg-primary"
        style="height: 10px"
        [style.width.%]="scrollPercentage"
      ></div>
    </div>

    <div style="height: 400px; width: 100%">
      <p class="mt-2" style="text-align: center">Some content here</p>
    </div>
  </div>
</section>
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { MdbScrollStatusService } from 'mdb-angular-scroll-status';
import { ModalComponent } from './modal/modal.component';
import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  @ViewChild('container', { static: true }) container!: ElementRef;

  scrollPercentage: number = 0;
  modalRef: MdbModalRef<ModalComponent> | null = null;
  isAlreadyOpenedOnce = false;

  constructor(
    private _scrollStatusService: MdbScrollStatusService,
    private modalService: MdbModalService
  ) {}

  ngOnInit(): void {
    this._scrollStatusService
      .getScrollPercentage(this.container.nativeElement)
      .subscribe((result) => {
        this.scrollPercentage = result;
        if (this.scrollPercentage >= 50 && !this.isAlreadyOpenedOnce) {
          this.openModal();
          this.isAlreadyOpenedOnce = true;
        }
      });
  }

  openModal() {
    this.modalRef = this.modalService.open(ModalComponent);
  }
}
.scroll-status {
  position: sticky;
  z-index: 1020;
  background: #ccc;
  top: 0%;
}

.scroll-status-progress {
  width: 0%;
}

Multiple modal

Some content here

<section class="border w-100 p-4">
  <div class="border w-100" style="height: 100px; overflow-y: auto" #container>
    <div class="scroll-status">
      <div
        class="scroll-status-progress bg-primary"
        style="height: 10px"
        [style.width.%]="scrollPercentage"
      ></div>
    </div>

    <div style="height: 400px; width: 100%">
      <p class="mt-2" style="text-align: center">Some content here</p>
    </div>
  </div>
</section>
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { MdbScrollStatusService } from 'mdb-angular-scroll-status';
import { ModalComponent } from './modal/modal.component';
import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  @ViewChild('container', { static: true }) container!: ElementRef;

  scrollPercentage: number = 0;
  modalRef: MdbModalRef<ModalComponent> | null = null;
  isAlreadyOpenedOnce = false;

  constructor(
    private _scrollStatusService: MdbScrollStatusService,
    private modalService: MdbModalService
  ) {}

  ngOnInit(): void {
    this._scrollStatusService
      .getScrollPercentage(this.container.nativeElement)
      .subscribe((result) => {
        this.scrollPercentage = result;
        if (this.scrollPercentage >= 50 && !this.isAlreadyOpenedOnce) {
          this.openModal();
          this.isAlreadyOpenedOnce = true;
        }
        if (this.scrollPercentage < 50 && this.isAlreadyOpenedOnce) {
          this.openModal();
          this.isAlreadyOpenedOnce = false;
        }
      });
  }

  openModal() {
    this.modalRef = this.modalService.open(ModalComponent);
  }
}
.scroll-status {
  position: sticky;
  z-index: 1020;
  background: #ccc;
  top: 0%;
}

.scroll-status-progress {
  width: 0%;
}

Scroll status - API

Installation

To install and configure the plugin follow our Plugins Installation Guide. Please remember to update all the plugin names and import paths. You can find all the necessary information in the Import section. 

npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/scroll-status

Import

import { MdbScrollStatusService } from 'mdb-angular-scroll-status';
…
@NgModule ({
  ...
  providers: [MdbScrollStatusService],
  ...
})

Methods

Name Description Example
getScrollPercentage(container) Get scrollPercentage observable of the given container scrollStatusService.getScrollPercentage(this.container.nativeElement)
getScrollPercentage() Get scrollPercentage observable of window/document scrollStatusService.getScrollPercentage() 
<div class="border w-100" style="height: 100px; overflow-y: auto" #container>
  <div class="scroll-status">
    <div
      class="scroll-status-progress bg-primary"
      style="height: 10px"
      [style.width.%]="scrollPercentage$ | async"
    ></div>
  </div>

  <div style="height: 400px; width: 100%">
    <p class="mt-2" style="text-align: center">Some content here</p>
  </div>
</div>
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Observable } from 'rxjs';
import { MdbScrollStatusService } from 'mdb-angular-scroll-status';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  @ViewChild('container', { static: true }) container!: ElementRef;

  scrollPercentage$: Observable<number> | null = null;

  constructor(private _scrollStatusService: MdbScrollStatusService) {}

  ngOnInit(): void {
    this.scrollPercentage$ = this._scrollStatusService.getScrollPercentage(
      this.container.nativeElement
    );
  }
}
.scroll-status {
  position: sticky;
  z-index: 1020;
  background: #ccc;
  top: 0%;
}

.scroll-status-progress {
  width: 0%;
}