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

Show code

        
            
          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

Show code

javascript

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

Properties

MDBScrollbar

Name	Type	Default	Description	Example
`tag`	string	`'div'`	Defines tag of the `MDBScrollbar` wrapper	`<MDBScrollbar tag="span">...</MDBScrollbar>`
`className`	string	`''`	Add custom class to MDBScrollbar	`<MDBScrollbar className="class">...</MDBScrollbar>`
`handlers`	string[]	`'['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch']'`	It is a list of handlers to scroll the element.	`<MDBScrollbar handlers={["keyboard"]}>...</MDBScrollbar>`
`wheelSpeed`	Number	`'1'`	The scroll speed applied to mousewheel event.	`<MDBScrollbar wheelSpeed={2}>...</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>`
`swipeEasing`	boolean	`'true'`	If this option is true, swipe scrolling will be eased.	`<MDBScrollbar swipeEasing>...</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>`
`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>`
`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>`
`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>`
`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>`
`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>`
`onScrollY`	Function	`''`	Invoked when the y-axis is scrolled in either direction.	`<MDBScrollbar onScrollY={handleEvent}>...</MDBScrollbar>`
`onScrollX`	Function	`''`	Invoked when the x-axis is scrolled in either direction.	`<MDBScrollbar onScrollX={handleEvent}>...</MDBScrollbar>`
`onScrollUp`	Function	`''`	Invoked when scrolling upwards.	`<MDBScrollbar onScrollUp={handleEvent}>...</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>`
`onYReachStart`	Function	`''`	Invoked when scrolling reaches the start of the y-axis.	`<MDBScrollbar onYReachStart={handleEvent}>...</MDBScrollbar>`
`onYReachEnd`	Function	`''`	Invoked when scrolling reaches the end of the y-axis (useful for infinite scroll).	`<MDBScrollbar onYReachEnd={handleEvent}>...</MDBScrollbar>`
`onXReachStart`	Function	`''`	Invoked when scrolling reaches the start of the x-axis.	`<MDBScrollbar onXReachStart={handleEvent}>...</MDBScrollbar>`
`onXReachEnd`	Function	`''`	Invoked when scrolling reaches the end of the x-axis.	`<MDBScrollbar onXReachEnd={handleEvent}>...</MDBScrollbar>`
`sidenav`	boolean	`false`	Enables sidenav mode.	`<MDBScrollbar sidenav >...</MDBScrollbar>`