vue-perfect-scrollbar

<template> <VuePerfectScrollbar class="scroll-area" :settings="settings" @ps-scroll-y="scrollHandle"> <div style="height: 1000px; width: 100%; background: #f0f0f0; padding: 20px;"> <h1>Scrollable Content</h1> <p>This is some long content to demonstrate the scrollbar functionality.</p> <p>Scroll down to see more...</p> <p v-for="n in 50" :key="n">Line {{ n }} of many.</p> </div> </VuePerfectScrollbar> </template> <script> import VuePerfectScrollbar from 'vue-perfect-scrollbar' import 'perfect-scrollbar/css/perfect-scrollbar.css' // Don't forget to import the CSS export default { components: { VuePerfectScrollbar }, name: 'App', data() { return { settings: { maxScrollbarLength: 60, wheelSpeed: 0.5 } } }, methods: { scrollHandle(evt) { console.log('Scroll Y event:', evt) }, // Example of manually updating the scrollbar updateScrollbar() { if (this.$refs.scrollbar) { // Assuming you add a ref='scrollbar' to VuePerfectScrollbar component // this.$refs.scrollbar.$children[0].update(); // Accessing underlying PerfectScrollbar instance console.warn('Manual update method might vary based on the Perfect Scrollbar version and wrapper implementation.') } } }, mounted() { // Simulate content change after a delay to show update necessity // setTimeout(() => { // // Add more content dynamically // // this.$nextTick(() => this.updateScrollbar()); // }, 2000); } } </script> <style lang="scss"> .scroll-area { position: relative; /* Crucial for perfect-scrollbar to work correctly */ margin: auto; width: 400px; height: 300px; border: 1px solid #ccc; } </style>