Scroll Status
Bootstrap 5 Scroll Status plugin
Scroll Status plugin creates progress bar indicating page or component scroll level.
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
Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.
Basic example
Create default Scroll Status by adding div
with class scroll-status
and data-mdb-scroll-status-init
attribute to a container
element with scroll option. Then add child element with scroll-status-progress
class.
Some content here
<section class="mb-4 w-100">
<div class="border" style="height: 100px; overflow-y: auto;">
<div data-mdb-scroll-status-init class="scroll-status" >
<div class="scroll-status-progress"></div>
</div>
<div style="height: 400px; width: 100%;">
<p class="mt-2" style="text-align: center;">Some content here</p>
</div>
</div>
</section>
Global example
Create element indicating global page scroll level.
<div data-mdb-scroll-status-init class="scroll-status" data-mdb-global="true">
<div class="scroll-status-progress"></div>
</div>
Styling
Color
Change default color of Scroll Status with
data-mdb-color
.
Some content here
<div class="border" style="height: 100px; overflow-y: auto;">
<div data-mdb-scroll-status-init class="scroll-status" data-mdb-color="green">
<div class="scroll-status-progress"></div>
</div>
<div style="height: 400px; width: 100%;">
<p class="mt-2" style="text-align: center;">Some content here</p>
</div>
</div>
Position
Change default vertical position of Scroll Status with
data-mdb-offset
.
Some content here
<div class="border" style="height: 100px; overflow-y: auto;">
<div data-mdb-scroll-status-init class="scroll-status" data-mdb-offset=10 >
<div class="scroll-status-progress"></div>
</div>
<div style="height: 400px; width: 100%;">
<p class="mt-2" style="text-align: center;">Some content here</p>
</div>
</div>
Height
Change default height of Scroll Status with
data-mdb-height
.
Some content here
<div class="border" style="height: 100px; overflow-y: auto;">
<div data-mdb-scroll-status-init class="scroll-status" data-mdb-height="20px">
<div class="scroll-status-progress"></div>
</div>
<div style="height: 400px; width: 100%;">
<p class="mt-2" style="text-align: center;">Some content here</p>
</div>
</div>
Modal
One-time modal
Display the modal with the specified ID
, defined in data-mdb-target
, once the specified scroll
value, set in data-mdb-scroll
, is reached.
Some content here
<div class="border" style="height: 100px; overflow: auto;">
<div data-mdb-scroll-status-init class="scroll-status mb-3" data-mdb-scroll=50 data-mdb-target="#exampleModalOne" >
<div class="scroll-status-progress"></div>
</div>
<div style="height: 400px; width: 100%;">
<p class="mt-2" style="text-align: center;">Some content here</p>
<div
class="modal fade"
id="exampleModalOne"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Scroll Status</h5>
<button
type="button"
class="btn-close"
data-mdb-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">Showing scroll status on 50% once</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal" data-mdb-ripple-init>
Close
</button>
<button type="button" class="btn btn-primary" data-mdb-ripple-init>Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
Multiple modal
To show modal more than once, add
data-mdb-open-once="false"
.
Some content here
<div class="border" style="height: 100px; overflow: auto;">
<div data-mdb-scroll-status-init class="scroll-status mb-3" data-mdb-scroll=50 data-mdb-target="#exampleModalTwo" data-mdb-open-once="false" >
<div class="scroll-status-progress"></div>
</div>
<div style="height: 400px; width: 100%;">
<p class="mt-2" style="text-align: center;">Some content here</p>
<div
class="modal fade"
id="exampleModalTwo"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Scroll Status</h5>
<button
type="button"
class="btn-close"
data-mdb-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">Showing scroll status on 50% multiple</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal" data-mdb-ripple-init>
Close
</button>
<button type="button" class="btn btn-primary" data-mdb-ripple-init>Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
Scroll Status - API
Import
import ScrollStatus from 'mdb-scroll-status';
@import '~mdb-scroll-status/css/scroll-status.min.css';
Usage
Via data attributes
Using the Scroll Status plugin doesn't require any additional JavaScript code - simply add
data-mdb-scroll-status-init
attribute to
.scroll-status
and use other data attributes to set all options.
<div data-mdb-scroll-status-init class="scroll-status" >
<div class="scroll-status-progress"></div>
</div>
Via JavaScript
<div id="scroll-status" >
<div class="scroll-status-progress"></div>
</div>
const scrollStatusExample = document.getElementById('scroll-status');
new ScrollStatus(scrollStatusExample)
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
<div id="scroll-status" >
<div class="scroll-status-progress"></div>
</div>
$(document).ready(() => {
$('#scroll-status').scrollStatus();
});
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-mdb-
, as in data-mdb-color="green"
.
Name | Type | Default | Description |
---|---|---|---|
color
|
String | #1266F1 |
Defines color of the progress bar. |
offset |
Number | 0 |
Defines offset of the progress bar. |
height |
String | 10px |
Defines height of the progress bar. |
global
|
Boolean | false |
If value is true, it will show global scroll (window scroll). |
scroll
|
Number | 0 |
Defines value which crossing will trigger modal. |
target
|
String | - |
Defines modal id, which will be shown. |
openOnce
|
Boolean | true |
If value is true, it will show modal just once. |
Methods
Name | Parameters | Description | Example |
---|---|---|---|
getInstance
|
element | Static method which allows to get the ScrollStatus instance associated with a DOM element. |
ScrollStatus.getInstance(element)
|
dispose
|
element | Disposes ScrollStatus instance. |
instance.dispose()
|
const scrollStatusElement = document.getElementById('scroll-status');
const instance = ScrollStatus.getInstance(scrollStatusElement);
instance.dispose();