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

Edit in sandbox 
        
            
        <section class="mb-4 w-100">
          <div class="border" style="height: 100px; overflow-y: auto;">
            <div class="scrollStatus" >
              <div class="scrollStatus-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 class="scrollStatus" data-mdb-global="true">
            <div class="scrollStatus-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 class="scrollStatus" data-mdb-color="green">
                <div class="scrollStatus-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 class="scrollStatus" data-mdb-offset=10 >
                <div class="scrollStatus-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 class="scrollStatus" data-mdb-height="20px">
                <div class="scrollStatus-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

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

Some content here

Edit in sandbox 
        
            
            <div class="border" style="height: 100px; overflow: auto;">
              <div class="scrollStatus mb-3" data-mdb-scroll=50 data-mdb-target="#exampleModalOne" >
                <div class="scrollStatus-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">
                          Close
                        </button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

Multiple modal

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

Some content here

Edit in sandbox 
        
            
            <div class="border" style="height: 100px; overflow: auto;">
              <div class="scrollStatus mb-3" data-mdb-scroll=50 data-mdb-target="#exampleModalTwo" data-mdb-open-once="false" >
                <div class="scrollStatus-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% mulitple</div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
                          Close
                        </button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

Scroll Status - API

Usage

Via data attributes

Edit in sandbox 
        
            
        <div class="scrollStatus" >
          <div class="scrollStatus-progress"></div>
        </div>

Via JavaScript

Edit in sandbox 
        
            
        <div id="scrollStatus" >
          <div class="scrollStatus-progress"></div>
        </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.

Edit in sandbox 
        
            
        <div id="scrollStatus" >
          <div class="scrollStatus-progress"></div>
        </div>
      
        
    
        
            
        $(document).ready(() => { 
          $('#scrollStatus').scrollStatus();
        });

Options

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.

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

Import

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

Edit in sandbox 
        
            
        import ScrollStatus from 'mdb-scroll-status';