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

Basic example

Create default Scroll Status by adding div with class scrollStatus to a container element with scroll option. Then add child element with scrollStatus-progress class.

Some content here

Global example

Create element indicating global page scroll level.



Change default color of Scroll Status with data-mdb-color.

Some content here


Change default vertical position of Scroll Status with data-mdb-offset.

Some content here


Change default height of Scroll Status with data-mdb-height.

Some content here


One-time modal

Once show modal with specified id in data-mdb-target after reaching value set in data-mdb-scroll.

Some content here

Multiple modal

To show modal more than just one time, add data-mdb-open-once="false".

Some content here

Scroll Status - API


Via data attributes

        <div class="scrollStatus" >
          <div class="scrollStatus-progress"></div>

Via JavaScript

        <div id="scrollStatus" >
          <div class="scrollStatus-progress"></div>

        const scrollStatusExample = document.getElementById('scrollStatus');
        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="scrollStatus" >
          <div class="scrollStatus-progress"></div>



Options can be passed via data attributes, JavaScript, or jQuery. For data attributes, append the option name to data-mdb-, as in data-mdb-color. Each option can be passed with value or null.

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.


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('scrollStatus');
        const instance = ScrollStatus.getInstance(scrollStatusElement);


MDB UI KIT also works with module bundlers. Use the following code to import this component:

        import ScrollStatus from 'mdb-scroll-status';