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

Edit in sandbox 
<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.

Edit in sandbox 
<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

Edit in sandbox 
<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

Edit in sandbox 
<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

Edit in sandbox 
<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

Edit in sandbox 
<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

Edit in sandbox 
<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

Edit in sandbox 
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.

Edit in sandbox 
<div data-mdb-scroll-status-init class="scroll-status" >
  <div class="scroll-status-progress"></div>
</div>

Via JavaScript

Edit in sandbox 
<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.

Edit in sandbox 
<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()
Edit in sandbox 
const scrollStatusElement = document.getElementById('scroll-status');
const instance = ScrollStatus.getInstance(scrollStatusElement);
instance.dispose();