Vue常用插件：vue-happy-scroll

简介

解决原生滚动条在不同系统、不同浏览器中的丑陋表现，
在保证原生滚动条功能可用的基础上实现了更丰富的功能、保证在所支持的浏览器下展现出风格一致、交互体验一致的滚动条。

• 保留原生滚动条功能
• 支持动态设置滚动条颜色
• 支持设置滚动条的位置。左右(竖向滚动条)、上下(横向滚动)方向
• 支持隐藏滚动条
• 支持动态设定滚动位置，并支持top与left值同步
• 支持动态数据resize，滚动条自动隐藏与显示
• 支持设置resize滚动条变化规则(e. 在chart应用中，来新消息时，滚动条始终在最底部)
• 支持设置滚动速度
• 支持设置隐藏滚动条，hover时显示

步骤

安装

• 安装：npm i vue-happy-scroll --save

引入

全局引入

• 修改src/main.js文件

import Vue from 'vue'
import { HappyScroll } from 'vue-happy-scroll'
import 'vue-happy-scroll/docs/happy-scroll.css'

Vue.component('happy-scroll', HappyScroll)

组件引入

import { HappyScroll } from 'vue-happy-scroll'
// 引入css，推荐将css放入main入口中引入一次即可。
import 'vue-happy-scroll/docs/happy-scroll.css'

export default {
  components: {
    HappyScroll
  } // 在组件内注册
}

使用

<!-- 外层盒子 -->
<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>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p>
      <p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p>
      <p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p>
      <p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p>
      <p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p>
      <p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p>
      <p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p>
      <p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p>
      <p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p>
      <p>士大夫撒入个任务二个人合同不大废物个人都怕顺风耳个二级gap所爱速发sure欧若尔奥沙是否</p>
    </div>
  </happy-scroll>
</div>

API

属性

事件

参考链接

• vue-happy-scroll