vue h5ios滑动 vue滑动条

最近自己在自学vue2.0，然后就自己摸索做一个简单的后台管理系统，在做的过程中，总感觉不同浏览器自带的滚动条样式不统一，也很难看，所以就在网上找一些使用vue的滚动条插件。最开始用的是Easy-scroll插件，可是在使用过程中，发现一个问题——由于在开发过程中，需要经常打开开发者选项进行调试，可是只要一开启这个选项，Easy-scroll插件就会出现debugger断点，在网上也一直没找到怎么取消debugger。后来就找到了今天要说的这款插件：vue-happy-scroll。

先张贴一张效果图：

说明：这里会出现横向滚动条，是因为默认是开启横向滚动条的，并且内容区域高度超出了外层盒子的宽度

下面介绍使用方法：

1、安装vue-happy-scroll
推荐使用npm安装，这样可以跟随你的webpack配置去选择怎样打包
npm install vue-happy-scroll --save-dev
当然，你也可以选择使用script标签的方式引入
2、注册组件
在main.js文件中编写一下代码段：
import Vue from 'vue'
import { HappyScroll } from 'vue-happy-scroll'
//自定义组件名
Vue.component('happy-scroll', HappyScroll)//引入css
import 'vue-happy-scroll/docs/happy-scroll.css'

3、vue组件中使用

在这里就以我的小项目为例，在dashboard.vue文件中写入如下代码，使用happy-scrool标签就可以使用滚动条了