Scroll Status

Bootstrap 5 Scroll Status plugin

Scroll Status plugin contains MDBScrollProgress component for visual representation of the scroll progress and v-mdb-scroll-status directive for calculating current scroll value on element.

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 with MDBScrollProgress. Pass progress property with the value calculated by v-mdb-scroll-status directive.

Some content here

Show code

Global example

Create element indicating global page scroll level.

Show code

Styling

Color

Change default color of MDBScrollProgress> with color property.

Some content here

Show code

Position

Change default vertical position of MDBScrollProgress with offset.

Some content here

Show code

Height

Change default height of MDBScrollProgress with height.

Some content here

Show code

Modal

One-time modal

Once show modal with once and scrollCallback arguments after reaching value set in scroll of v-mdb-scroll-status

Some content here

Show code

Multiple modal

To show modal more than just one time, simply use only scroll and scrollCalback.

Some content here

Show code