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
<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.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
);
}
}
.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.
<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.scss'],
})
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
<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.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
);
}
}
.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
<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.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
);
}
}
.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
<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.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
);
}
}
.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
<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
<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
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="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>
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
);
}
}
.scrollStatus {
position: sticky;
z-index: 1020;
background: #ccc;
top: 0%;
}
.scrollStatus-progress {
width: 0%;
}