Scrollbar

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

Required ES init: PerfectScrollbar *
* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method.

Basic example

Scrollbar is initialized automatically when you add data-mdb-perfect-scrollbar-init attribute to your container.

Wild Landscape
Show code

Options

JavaScript init

You can easily init scrollbar with JavaScript. You have to invoke new mdb.PerfectScrollbar() and include options within that.

Wild Landscape
Show code

Data attributes

You can easily set options with data-mdb attributes. For example, insert data-mdb-suppress-scroll-x='true' into your container.

Wild Landscape
Show code

Colors example

Scrollbar's thumb and rail's colors can be customized with simple CSS. Use class that describes the element of Scrollbar you would like to edit: .ps__rail-y, .ps__rail-x, .ps__thumb-y, .ps__thumb-x

...
Show code

Events

PerfectScrollbar dispatches custom events.

  • ScrollX
  • ScrollY
  • ScrollUp
  • ScrollDown
  • ScrollLeft
  • ScrollRight
  • ScrollXEnd
  • ScrollYEnd
  • ScrollXStart
  • ScrollYStart

Example

Wild Landscape
Show code