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 .scrollStatus-progress element's [style.width.%] attribute to the returned value from service in order to dynamically update scroll progress bar.

Some content here

Show code

        
            
        <section class="border w-100 p-4">
          <div class="border w-100" style="height: 100px; overflow-y: auto" #container>
            <div class="scrollStatus">
              <div
                class="scrollStatus-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.css'],
})
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
    );
  }
}

        
            
        .scrollStatus {
          position: sticky;
          z-index: 1020;
          background: #ccc;
          top: 0%;
        }
        
        .scrollStatus-progress {
          width: 0%;
        }

Global example

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

Show code

        
            
<div class="container fixed-top" style="top: 2rem">
  <div class="scrollStatus">
    <div
      class="scrollStatus-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.css'],
})
export class AppComponent implements OnInit {
  scrollPercentage$: Observable<number> | null = null;

  constructor(private _scrollStatusService: MdbScrollStatusService) {}

  ngOnInit(): void {
    this.scrollPercentage$ = this._scrollStatusService.getScrollPercentage();
  }
}

        
            
.scrollStatus {
position: sticky;
z-index: 1020;
background: #ccc;
top: 0%;
}

.scrollStatus-progress {
width: 0%;
}

Styling

Color

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

Some content here

Show code

        
            
          <section class="border w-100 p-4">
            <div class="border w-100" style="height: 100px; overflow-y: auto" #container>
              <div class="scrollStatus">
                <div
                  class="scrollStatus-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.css'],
          })
          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
              );
            }
          }

        
            
          .scrollStatus {
            position: sticky;
            z-index: 1020;
            background: #ccc;
            top: 0%;
          }
          
          .scrollStatus-progress {
            width: 0%;
          }

Position

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

Some content here

Show code

        
            
            <div class="border" style="height: 100px; overflow-y: auto;" #container>
              <div class="scrollStatus" style="top: 10%">
                <div class="scrollStatus-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.css'],
          })
          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
              );
            }
          }

        
            
          .scrollStatus {
            position: sticky;
            z-index: 1020;
            background: #ccc;
            top: 0%;
          }
          
          .scrollStatus-progress {
            width: 0%;
          }

Height

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

Some content here

Show code

        
            
          <div class="border" style="height: 100px; overflow-y: auto;" #container>
            <div class="scrollStatus">
              <div class="scrollStatus-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.css'],
          })
          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
              );
            }
          }

        
            
          .scrollStatus {
            position: sticky;
            z-index: 1020;
            background: #ccc;
            top: 0%;
          }
          
          .scrollStatus-progress {
            width: 0%;
          }

Modal

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

One-time modal

Some content here

Show code

        
            
          <section class="border w-100 p-4">
            <div class="border w-100" style="height: 100px; overflow-y: auto" #container>
              <div class="scrollStatus">
                <div
                  class="scrollStatus-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);
            }
          }

        
            
          .scrollStatus {
            position: sticky;
            z-index: 1020;
            background: #ccc;
            top: 0%;
          }
          
          .scrollStatus-progress {
            width: 0%;
          }

Multiple modal

Some content here

Show code

        
            
          <section class="border w-100 p-4">
            <div class="border w-100" style="height: 100px; overflow-y: auto" #container>
              <div class="scrollStatus">
                <div
                  class="scrollStatus-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);
  }
}

        
            
          .scrollStatus {
            position: sticky;
            z-index: 1020;
            background: #ccc;
            top: 0%;
          }
          
          .scrollStatus-progress {
            width: 0%;
          }

Scroll status - API

Import

Show code

JavaScript

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

Methods

Name	Description
`getScrollPercentage(container)`	Get scrollPercentage observable of the given container
`getScrollPercentage()`	Get scrollPercentage observable of window/document

Scroll Status

Angular Bootstrap 5 Scroll Status plugin

Basic example

Global example

Styling

Color

Position

Height

Modal

One-time modal

Multiple modal

Related resources

Scroll status - API

Import

Methods