Scrollbar

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.

... 
        
            
            <template>
              <MDBScrollbar width="600px" height="400px">
                <img
                  src="https://mdbootstrap.com/img/new/slides/041.webp"
                  alt="..."
                />
              </MDBScrollbar>
            </template>
          
        
    
        
            
            <script>
              import { MDBScrollbar } from "mdb-vue-ui-kit";
              export default {
                components: {
                  MDBScrollbar
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBScrollbar } from "mdb-vue-ui-kit";
            </script>

Scrollbar - API

Import

        
            
        <script>
          import {
            MDBScrollbar
          } from 'mdb-vue-ui-kit';
        </script>

Properties

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.