1、介绍一个vue滚动条插件 vue-happy-scroll


当前版本不支持移动端

1.1安装方法

1.1.1 cdn引入

<!-- 引入css，该链接始终为最新版的资源 -->
<link rel="stylesheet" href="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.css">
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>
<!-- 引入组件，该链接始终为最新版的资源 -->
<script src="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.min.js"></script>

1.1.2 我不熟悉的webpack的npm安装

npm install vue-happy-scroll --save-dev

注册组件：

在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'

2、在 vue 组件中使用

核心是使用 happy-scroll标签即可。

特此奉上开发者的readme：

小案例：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入css，该链接始终为最新版的资源 -->
    <link rel="stylesheet" href="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入组件，该链接始终为最新版的资源 -->
    <script src="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.min.js"></script>
</head>

<body>
    <div id='vueScoll'>
        <!-- 外层盒子,必须有 -->
        <div style="height:200px;width:300px;background-color:#ccc;">
            <!-- 这里的标签名称要和main.js文件中定义的组件名称保持一致 -->
            <happy-scroll color="rgba(0,0,0,0.5)" size="5">
                <!-- 内层盒子——内容区 -->
                <div class="con">
                    <p>春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。</p>
                    <p>春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。</p>
                    <p>春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。</p>
                    <p>春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。</p>
                    <p>春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。</p>
                    <p>春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。</p>
                    <p>春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。</p>
                    <p>春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。</p>
                    <p>春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。</p>
                    <p>春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。</p>
                </div>
            </happy-scroll>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#vueScoll",
        })
    </script>
</body>

 vue滚动条github资源 

tangdaohai/vue-happy-scroll: 基于vue2.0实现的滚动条插件。scroll component fro vue2.0  https://github.com/tangdaohai/vue-happy-scroll