hfalucas/vue-simplebar

Vue.js wrapper for simplebar

vue-simplebar's Issues

Nothing displays when slotted content updates

Is this expected behavior? I'm extending your component and attempting to force it to take into account updates:

<script>

    import {VueSimplebar} from "vue-simplebar";

    const reInit = VueSimplebar.mounted;

    export default {
        extends: VueSimplebar,
        beforeUpdate() {
            this.destroy();
        },
        updated() {
            reInit.call(this);
        }
    }

</script>

<style lang="scss">

    @import "~simplebar/src/simplebar.css";

</style>

However, this doesn't seem to fix the problem. I can confirm that my slotted content is in the component. But, the plugin isn't re-applied.

This is an example of what I'm using inside this component:

<scrollbar
    class="question"
    :style="style.container"
    tag="ul"
    :options="scrollbarSettings"
>
    <li
        :class="{selected: selected.question === item}"
        :key="index"
        @click="selectQuestion(item)"
        v-for="(item, index) in renderedQuestions"
    >
        <i class="fas fa-chevron-right"></i> {{ item.recordTitle }}
    </li>
    <li
        class="placeholder no-hover no-border no-underline no-transition"
        v-if="!this.renderedQuestions.length"
    >
        Please select a topic
    </li>
</scrollbar>

How options are supposed to work?

Hi, I'm trying to use vue-simplebar and while the default one works for me like this:
in template:

<SimpleBar class="examinations">
    <ExaminationList />
</SimpleBar>

in script:

import SimpleBar from 'simplebar-vue';
import 'simplebar/dist/simplebar.min.css';
//...
    components: {
        //...
        SimpleBar,
    }

I fail to set custom options. To be precise, I've only succeeded to set direction like this:

<SimpleBar class="examinations" data-simplebar data-simplebar-direction="rtl">
    <ExaminationList />
</SimpleBar>

but it doesn't work like this

<SimpleBar class="examinations" :options="{ direction: 'rtl' }">
    <ExaminationList />
</SimpleBar>

and for autoHide or scrollbarMinSize all these don't seem to work:

<SimpleBar class="examinations" :options="{ autoHide: false }">
    <ExaminationList />
</SimpleBar>

<SimpleBar class="examinations" data-simplebar data-simplebar-autoHide="false">
    <ExaminationList />
</SimpleBar>

<SimpleBar class="examinations" data-simplebar data-simplebar-auto-hide="false">
    <ExaminationList />
</SimpleBar>

Is this a bug? Am I missing something? Would be nice to have usage of options described in docs explicitly.

Best regards

How to use methods, either getScrollElement or something to scroll element programmatically?

I'm using vue-simplebar in a component that shows some paginated list. I noticed that on changing the page, the scroll stays where it were, but user would probably expect that the list gets scrolled to the top on page change.

I'm looking for a way to scroll the list programmatically. The problem is: I don't understand how to get the corresponding SimpleBar instance from a component so that I can call one of its methods. For instance, I could use

const scrollElement = simpleBar.getScrollElement();
scrollElement.scrollTo(0, 0);

if I had reference to scrollElement but I don't understand if I can get it.

The only workaround I can think of is to grab the element using some selector.. actually, after several experiments with inspector and console I figured that currently I can do

document.querySelector('.simplebar-content-wrapper').scrollTo(0,0)

to achieve this (well, it should be scoped to the component instead of looking through the whole document), but there's no garantee that the correct selector won't change (getScrollElement should get the correct element), so still it would be nice to be able to get the SimpleBar instance/call its methods. Any ideas?