Vue 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

Scrollbar is initialized automatically when you add MDBScrollbar as a wrapper component.

              <MDBScrollbar width="600px" height="400px">
              import { MDBScrollbar } from "mdb-vue-ui-kit";
              export default {
                components: {
            <script setup lang="ts">
              import { MDBScrollbar } from "mdb-vue-ui-kit";

Scrollbar - API


          import {
          } from 'mdb-vue-ui-kit';


Property Type Default Description
disableKeyboard Boolean false Disable keyboard event.
height String "100%" Sets scrollbar height.
minScrollbarLength Number 0 Defines min scrollbar length.
maxScrollbarLength Number 0 Defines max scrollbar length.
swipeEasing Boolean true Defines swipe easing.
scrollingThreshold Number 1000 Defines scrolling threshold.
useBothWheelAxes Boolean false Sets two wheel axes.
suppressScrollX Boolean false Sets scroll x supress.
scrollXMarginOffset Number 0 Sets scroll x margin offset.
scrollYMarginOffset Number 0 Sets scroll y margin offset.
scrollbarClass String Sets custom scrollbar class.
scrollbarStyle String Sets custom scrollbar style.
width String "100%" Sets scrollbar width.
wheelSpeed Number 1 Defines wheel speed.
wheelPropagation Boolean true Defines wheel propagation.