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