how scroll bottom simplebar in vue js

<template>
  <div ref="scrollContainer" class="scroll-container">
    <!-- Your content goes here -->
  </div>
</template>

<script>
export default {
  mounted() {
    this.initializeScrollbar();
  },
  methods: {
    initializeScrollbar() {
      const options = {
        autoHide: false, // Adjust based on your requirements
      };

      this.simpleBar = new SimpleBar(this.$refs.scrollContainer, options);

      // Access the SimpleBar instance using this.simpleBar
      // For example, to scroll to the bottom:
      this.simpleBar.getScrollElement().scrollTop = this.simpleBar.getScrollElement().scrollHeight;
    },
  },
  beforeDestroy() {
    // Destroy the SimpleBar instance to prevent memory leaks
    if (this.simpleBar) {
      this.simpleBar.unMount();
    }
  },
};
</script>

<style scoped>
/ Add your styles here if needed /
.scroll-container {
  max-height: 300px; / Set the max height for the scroll container /
  overflow-y: auto; / Enable vertical scrollbar /
}
</style>

Make sure to install SimpleBar in your project before using it. You can do this by including the SimpleBar CSS and JavaScript files or by installing it through npm or yarn:

npm install simplebar

or

yarn add simplebar

After installing SimpleBar, you can import it in your component:

import SimpleBar from 'simplebar';
import 'simplebar/dist/simplebar.min.css';