V-scrollbar NPM

v-scrollbar

Vue-based component, an adaptive scroll bar that displays a scroll bar when the child element's content exceeds the parent scroll bar (基于vue的组件，自适应的滚动条,当子元素的内容超出父级滚动条就会显示滚动条)

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Install

npm install v-scrollbar --save-dev

import scrollbar from 'v-scrollbar';
Vue.component('my-component', {
    components: {
        scrollbar
    }
});

Props

Props	Tpye	Default	Description
changeTop	Number	Null	change scroll bar position about top (双向绑定顶部的偏移量)
changeLeft	Number	Null	change scroll bar position about letf (双向绑定左侧部的偏移量)
timeOut	Number	0	Animation time for subcomponents (如果该组件内有动画会影响这个组件的功能，所有请传入该动画的结束)

Usage

<div>
    <scrollbar @top="top" @bottom="bottom" @left="left" @right="right" :istime="istime" :changeTop.sync="changeTop" :changeLeft.sync="changeLeft">HTML(滚动的内容)</scrollbar>
<div>

Events

The callback function at the border

Event	Output	Description
top	Function	When the scroll bar is on the topmost side (当滚动条到顶部时的回调)
bottom	Function	When the scroll bar is on the bottommost side (当滚动条到底部时的回调)
left	Function	When the scroll bar is on the leftmost side (当滚动条到最左边时的回调)
right	Function	When the scroll bar is on the rightmost side (当滚动条到最右边时的回调)