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

        
            
        import React, { useRef } from 'react';
        import { MDBScrollStatus } from 'mdb-react-scroll-status';

        export default function App() {
          const exampleReference = useRef(null);

          return (
            <section class="mb-4 w-100">
              <div class="border" style="height: 100px; overflow-y: auto;" ref={exampleReference}>
                <MDBScrollStatus containerRef={exampleReference}/>
                <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.

        
            
        import React from 'react'
        import { MDBScrollStatus } from 'mdb-react-scroll-status'

        export default function App() {
          return (
            <MDBScrollStatus global />
          )
        }

Styling

Color

Change default color of Scroll Status bar with color prop.

Some content here

        
            
          import React, { useRef } from 'react';
          import { MDBScrollStatus } from 'mdb-react-scroll-status';
  
          export default function App() {
            const exampleReference = useRef(null);
  
            return (
              <section class="mb-4 w-100">
                <div class="border" style="height: 100px; overflow-y: auto;" ref={exampleReference}>
                  <MDBScrollStatus containerRef={exampleReference} color="green" />
                  <div style="height: 400px; width: 100%;">
                    <p class="mt-2" style="text-align: center;">Some content here</p>
                  </div>
                </div>
              </section>
            )
          }

Position

Change default vertical position of Scroll Status with offset prop.

Some content here

        
            
          import React, { useRef } from 'react';
          import { MDBScrollStatus } from 'mdb-react-scroll-status';
  
          export default function App() {
            const exampleReference = useRef(null);
  
            return (
              <section class="mb-4 w-100">
                <div class="border" style="height: 100px; overflow-y: auto;" ref={exampleReference}>
                  <MDBScrollStatus containerRef={exampleReference} offset={10} />
                  <div style="height: 400px; width: 100%;">
                    <p class="mt-2" style="text-align: center;">Some content here</p>
                  </div>
                </div>
              </section>
            )
          }

Height

Change default height of Scroll Status bar with height prop.

Some content here

        
            
          import React, { useRef } from 'react';
          import { MDBScrollStatus } from 'mdb-react-scroll-status';
  
          export default function App() {
            const exampleReference = useRef(null);
  
            return (
              <section class="mb-4 w-100">
                <div class="border" style="height: 100px; overflow-y: auto;" ref={exampleReference}>
                  <MDBScrollStatus containerRef={exampleReference} height="20px" />
                  <div style="height: 400px; width: 100%;">
                    <p class="mt-2" style="text-align: center;">Some content here</p>
                  </div>
                </div>
              </section>
            )
          }

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

        
            
          import React, { useRef, useState } from 'react';
          import {
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter,
            MDBBtn,
          } from 'mdb-react-ui-kit';
          import { MDBScrollStatus } from 'mdb-react-scroll-status';
  
          export default function App() {
            const [toggleShowModal, setToggleShowModal] = useState(false);
            const exampleReference = useRef(null);
  
            return (
              <section class="mb-4 w-100">
                <MDBModal open={toggleShowModal} onClose={() => setToggleShowModal(false)} tabIndex={-1}>
                  <MDBModalDialog>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Scroll Status</MDBModalTitle>
                        <MDBBtn className='btn-close' color='none' onClick={() => setToggleShowModal(false)}></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>Showing scroll status on 50%</MDBModalBody>
    
                      <MDBModalFooter>
                        <MDBBtn color='secondary' onClick={() => setToggleShowModal(false)}>
                          Close
                        </MDBBtn>
                        <MDBBtn>Save changes</MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>

                <div class="border" style="height: 100px; overflow-y: auto;" ref={exampleReference}>
                  <MDBScrollStatus containerRef={exampleReference} scroll={50} onScrollTarget={()=> setToggleShowModal(true)} />
                  <div style="height: 400px; width: 100%;">
                    <p class="mt-2" style="text-align: center;">Some content here</p>
                  </div>
                </div>
              </section>
            )
          }

Multiple open on modal example

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

Some content here

        
            
          import React, { useRef, useState } from 'react';
          import {
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter,
            MDBBtn,
          } from 'mdb-react-ui-kit';
          import { MDBScrollStatus } from 'mdb-react-scroll-status';
  
          export default function App() {
            const [toggleShowModal, setToggleShowModal] = useState(false);
            const exampleReference = useRef(null);
  
            return (
              <section class="mb-4 w-100">
                <MDBModal open={toggleShowModal} onClose={() => setToggleShowModal(false)} tabIndex={-1}>
                  <MDBModalDialog>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Scroll Status</MDBModalTitle>
                        <MDBBtn className='btn-close' color='none' onClick={() => setToggleShowModal(false)}></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>Showing scroll status on 50%</MDBModalBody>
    
                      <MDBModalFooter>
                        <MDBBtn color='secondary' onClick={() => setToggleShowModal(false)}>
                          Close
                        </MDBBtn>
                        <MDBBtn>Save changes</MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>

                <div class="border" style="height: 100px; overflow-y: auto;" ref={exampleReference}>
                  <MDBScrollStatus containerRef={exampleReference} scroll={50} onScrollTarget={()=> setToggleShowModal(true)} triggerOnce={false}/>
                  <div style="height: 400px; width: 100%;">
                    <p class="mt-2" style="text-align: center;">Some content here</p>
                  </div>
                </div>
              </section>
            )
          }

Scroll Status - API

Import

        
            
            import { MDBScrollStatus } from 'mdb-react-scroll-status';

Properties

MDBScrollStatus

Name Type Default Description Example
className string '' Add custom class to MDBScrollStatus <MDBScrollStatus className="class" />
color string '#1266F1' Defines color of the progress bar. <MDBScrollStatus color='#000' />
containerRef React.MutableRefObject<any> A reference to the object whose scroll value will be shown. <MDBScrollStatus containerRef={someRef} />
global boolean false If value is true, it will show global scroll (window scroll). <MDBScrollStatus global />
height string 10px Defines height of the progress bar. <MDBScrollStatus height='20px' />
offset number 0 Defines offset of the progress bar. <MDBScrollStatus offset={10} />
scroll number - Defines percentage value which crossing will trigger onScrollTarget event. <MDBScrollStatus scroll={50} />
triggerOnce boolean true If value is true, it will trigger onScrollTarget just once. <MDBScrollStatus triggerOnce={false} />

Events

Name Type Description
onScroll (value: any) => any Returns the current scroll percentage.
onScrollTarget () => any Fires immediately when the scroll value is exceeded