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>
|