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.