这是一个基于 vue2 的滚动条解决方案

一、打包

npm run build

二、使用

npm i story-scrollbar -S

或

yarn add story-scrollbar

// main.js
// 这是一个基于vue2的scrollbar解决方案，所以建议在vue2环境下使用
import SScrollbar from "story-scrollbar";

Vue.use(SScrollbar);

<template>
  <SScrollbar class="scroll">
    <!--content-->
  </SScrollbar>
</template>

<style> 
.scroll {  
  height:500px;
  border:1px solid #eee;
}
</style>

//  需要指定默认的高度和样式

props

verticalStyle : 竖直滑块的样式

horizontalStyle : 水平滑块的样式

event

// 通过ref获取scrollbar实例，实例上有这样一个方法

scrollTo (direction, px = 10, type = 'step') 

// 分别接受 
// 方向 'vertical' | 'horizontal'
// 距离 number 
// 类型 'step' | 'distance'

// 代表水平或者竖直滑块 使用什么样的方式 滑到哪里去