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

Show code

        
            
        <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.

Show code

        
            
<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

Show code

        
            
          <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

Show code

        
            
            <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

Show code

        
            
          <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

Show code

        
            
          <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

Show code

        
            
          <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.

Terminal

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

Import

Show code

TypeScript

        
            
          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()`

Show code

        
            
          <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%;
          }

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

Installation

Import

Methods