Scroll Status

React Bootstrap 5 Scroll Status plugin

Scroll Status plugin creates progress bar indicating page or component scroll level.

Scroll status plugin built with 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 <MDBScrollStatus> with containerRef  pro addressing a container element with scroll option.

Some content here

Show code

Global example

Create element indicating global page scroll level.

Show code

Styling

Color

Change default color of Scroll Status bar with color prop.

Some content here

Show code

Position

Change default vertical position of Scroll Status with offset prop.

Some content here

Show code

Height

Change default height of Scroll Status bar with height prop.

Some content here

Show code

Trigger

One-time open on modal example

Fires onScrollTarget function immediately when the scroll value is exceeded. Below is an example using a modal.

Some content here

Show code

Multiple open on modal example

To trigger a passed function multiple times, add triggerOnce={false} prop.

Some content here

Show code