50 overlayScrollbars scroll 이벤트

source: categories/study/vue-experiance/vue-experiance_9-40.md

overlayScrollbars scroll 이벤트

이 이벤트를 적극 활용하면 활용할 수 있는 부분이 엄청나게 많다.

<template>
    <overlay-scrollbars
        ref="overlayScrollbars"
        :class="className"
        :style="{
            width,
            height,
        }"
        :options="{
            ...options,
            callbacks: {
                onScroll: scrollFunc,
            }
        }"
    >
        <slot></slot>    
    </overlay-scrollbars>
</template>

<script>
import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';

export default {
    name: 'OverlayScroll',
    components: {
        'overlay-scrollbars': OverlayScrollbarsComponent,
    },
    props: {
        className: {
            type: String,
        },
        width: {
            type: Number,
        },
        height: {
            type: Number,
        },
        options: {
            type: Object,
        }
    },
    watch: {
        scrollTop: {
            handler(val) {
                // this.$refs.overlayScrollbars.osTarget();
                this.$refs.overlayScrollbars.onInstance().scroll({y: val}, 1000, 'easeOutBounce');
            }
        }
    },
    methods: {
        scrollFunc(e) {
            this.$emit('scrollEvent', e.target.scrollLeft, e.target.scrollTop);
        }
    }
}
</script>