how to show the bar when I initialize it

[husilang]

Hi In you demo, the scrollbar is always showing. But in my project, The scrollbar only display when I scrolling, I want it to be displayed when the component was initialized for the first time. What should I do? Thank you!

[hotrush]

Same issue here

[zaclem01]

If you're loading your content of the scroll container with an ajax call, you'll need to have the scroll component wait for the response. Otherwise, it initializes with a zero height container, which makes the scrollbar itself hide.

[hotrush]

@zaclem01 maybe any resize/re-render event on data changing? Otherwise it is some useles, because vue js is a modern framework for app with dynamic data, and most of this data can be loaded via ajax)

[raulhuelamo]

I added a reference to the vue2-scrollbar component, then after the async data has been fetched, I call the calculateSize() method from the scrollbar reference; works like a charm.

<vue-scroll-bar ref="scrollbar"> ...your content... </vue-scroll-bar> this.$refs.scrollbar.calculateSize();

Hope it helps

[tmcdos]

You can simply add

    updated ()
    {
      this.calculateSize()
    },

after the mounted() method in the vue-scrollbar source

[login2030]

My solution

export default {
    components: {
        'vue-scrollbar': require('vue2-scrollbar')
    },
    data() {
        return {
            onceCalculateSizeScroll: true
        };
    },
    updated() {
        if (this.onceCalculateSizeScroll) {
            this.$refs.scrollbar.calculateSize();
            this.onceCalculateSizeScroll = false;
        }
    },
}