Scrollbar

React Bootstrap 5 Scrollbar

Scrollbar method which allows you to create a custom scrollbar.

Note: Read the API tab to find all available options and advanced customization

Basic example

... 
        
            
          import React from 'react';
          import { MDBScrollbar } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBScrollbar style={{ position: 'relative', width: '600px', height: '400px' }}>
                <img
                  src='https://mdbootstrap.com/img/new/slides/041.webp'
                  alt='...'
                  style={{ height: '700px', width: '1000px' }}
                />
              </MDBScrollbar>
            );
          }

Options

You can easily init scrollbar options with props. Check full list of options here

... 
        
            
          import React from 'react';
          import { MDBScrollbar } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBScrollbar suppressScrollX style={{ position: 'relative', width: '600px', height: '400px' }}>
                <img
                  src='https://mdbootstrap.com/img/new/slides/041.webp'
                  alt='...'
                  style={{ height: '700px', width: '1000px' }}
                />
              </MDBScrollbar>
            );
          }

Scrollbar - API

Import

        
            
        import { MDBScrollbar } from 'mdb-react-ui-kit';

Properties

MDBScrollbar

Name Type Default Description Example
handlers string[] '['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch']' It is a list of handlers to scroll the element. <MDBScrollbar handlers={["keyboard"]}>...</MDBScrollbar>
maxScrollbarLength Number 'undefined' When set to an integer value, the thumb part of the scrollbar will not expand over that number of pixels. <MDBScrollbar maxScrollbarLength={1024}>...</MDBScrollbar>
minScrollbarLength Number 'undefined' When set to an integer value, the thumb part of the scrollbar will not shrink below that number of pixels. <MDBScrollbar minScrollbarLength={1024}>...</MDBScrollbar>
onScrollDown Function '' Invoked when scrolling downwards. <MDBScrollbar onScrollDown={handleEvent}>...</MDBScrollbar>
onScrollLeft Function '' Invoked when scrolling to the left. <MDBScrollbar onScrollLeft={handleEvent}>...</MDBScrollbar>
onScrollRight Function '' Invoked when scrolling to the right. <MDBScrollbar onScrollRight={handleEvent}>...</MDBScrollbar>
onScrollUp Function '' Invoked when scrolling upwards. <MDBScrollbar onScrollUp={handleEvent}>...</MDBScrollbar>
onScrollX Function '' Invoked when the x-axis is scrolled in either direction. <MDBScrollbar onScrollX={handleEvent}>...</MDBScrollbar>
onScrollY Function '' Invoked when the y-axis is scrolled in either direction. <MDBScrollbar onScrollY={handleEvent}>...</MDBScrollbar>
onXReachEnd Function '' Invoked when scrolling reaches the end of the x-axis. <MDBScrollbar onXReachEnd={handleEvent}>...</MDBScrollbar>
onXReachStart Function '' Invoked when scrolling reaches the start of the x-axis. <MDBScrollbar onXReachStart={handleEvent}>...</MDBScrollbar>
onYReachEnd Function '' Invoked when scrolling reaches the end of the y-axis (useful for infinite scroll). <MDBScrollbar onYReachEnd={handleEvent}>...</MDBScrollbar>
onYReachStart Function '' Invoked when scrolling reaches the start of the y-axis. <MDBScrollbar onYReachStart={handleEvent}>...</MDBScrollbar>
scrollBarRef React.RefObject '' Sets a reference for the MDBScrollbar element <MDBScrollbar scrollBarRef={exampleRef}>...</MDBScrollbar>
scrollXMarginOffset Number '0' The number of pixels the content width can surpass the container width without enabling the X-axis scroll bar. Allows some "wiggle room" or "offset break", so that X-axis scroll bar is not enabled just because of a few pixels. <MDBScrollbar scrollXMarginOffset={5}>...</MDBScrollbar>
scrollYMarginOffset Number '0' The number of pixels the content height can surpass the container height without enabling the Y-axis scroll bar. Allows some "wiggle room" or "offset break", so that Y-axis scroll bar is not enabled just because of a few pixels. <MDBScrollbar scrollYMarginOffset={5}>...</MDBScrollbar>
scrollingThreshold Number '1000' This sets threshold for ps--scrolling-x and ps--scrolling-y classes to remain. In the default CSS, they make scrollbars shown regardless of hover state. The unit is millisecond. <MDBScrollbar scrollingThreshold={2000}>...</MDBScrollbar>
sidenav boolean false Enables sidenav mode. <MDBScrollbar sidenav >...</MDBScrollbar>
suppressScrollX boolean 'false' When set to true, the scrollbar in X-axis will not be available, regardless of the content width. <MDBScrollbar suppressScrollX>...</MDBScrollbar>
suppressScrollY boolean 'false' When set to true, the scroll bar in Y-axis will not be available, regardless of the content height. <MDBScrollbar suppressScrollY>...</MDBScrollbar>
swipeEasing boolean 'true' If this option is true, swipe scrolling will be eased. <MDBScrollbar swipeEasing>...</MDBScrollbar>
tag string 'div' Defines tag of the MDBScrollbar wrapper <MDBScrollbar tag="span">...</MDBScrollbar>
useBothWheelAxes boolean 'false' When set to true, and only one (vertical or horizontal) scrollbar is visible then both vertical and horizontal scrolling will affect the scrollbar. <MDBScrollbar useBothWheelAxes>...</MDBScrollbar>
wheelPropagation boolean 'true' If this option is true, when the scroll reaches the end of the side, mousewheel event will be propagated to parent element. <MDBScrollbar wheelPropagation>...</MDBScrollbar>
wheelSpeed Number '1' The scroll speed applied to mousewheel event. <MDBScrollbar wheelSpeed={2}>...</MDBScrollbar>