Scrollbar

React Bootstrap 5 Scrollbar component

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

...

Options

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

...

Scrollbar - API


Import


        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>