vue-happy-scroll - npm

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

Feature:

保留原生滚动条功能

支持动态设置滚动条颜色

支持设置滚动条的位置。左右(竖向滚动条)、上下(横向滚动)方向

支持隐藏滚动条

支持动态设定滚动位置，并支持top与left值同步

支持动态数据resize，滚动条自动隐藏与显示

支持设置resize滚动条变化规则(e. 在chart应用中，来新消息时，滚动条始终在最底部)

支持设置滚动速度

支持设置隐藏滚动条，hover时显示

Demo 地址

https://tangdaohai.github.io/vue-happy-scroll/

vue-happy-scroll 是干嘛的

vue-happy-scroll 是一款基于vue2.0的滚动条插件。

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

它可以让你无需关心滚动条的兼容性问题，无需关心 内容区域 的宽高，当设定 resize 属性后，可以根据内容大小 自动显示或隐藏滚动条 。这里有对各种丰富的额外功能进行说明。

版本迭代计划列表

https://github.com/tangdaohai/vue-happy-scroll/projects/1

推荐使用

npm

，这样可以跟随你的


   webpack

配置去选择怎样打包。

npm i -D vue-happy-scroll
当前是使用的https://unpkg.com托管CDN，unpkg会自动与npm中版本保持同步。
通过以下方式引入即可:
<html>
  <head>
    <!-- 引入css，该链接始终为最新版的资源 -->
    <link rel="stylesheet" href="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.css">
  </head>
  <body>
  <!-- 引入vue -->
  <!-- 引入组件，该链接始终为最新版的资源 -->
  <script src="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.min.js"></script> 
  </body>
</html>
可以访问https://unpkg.com/vue-happy-scroll/ 来选择不同版本
<template>
  <happy-scroll>
    <!-- 你的内容 -->
  </happy-scroll>
</template>
<script>
  import Vue from 'vue'
 
  import HappyScroll from 'vue-happy-scroll'
  // 引入css
  import 'vue-happy-scroll/docs/happy-scroll.css'
  Vue.use(HappyScroll)
 
  //或者
  import { HappyScroll } from 'vue-happy-scroll'
  //自定义组件名
  Vue.component('happy-scroll', HappyScroll)
</script>
<template>
  <happy-scroll>
    <!-- 你的内容 -->
  </happy-scroll>
</template>
<script>
  import { HappyScroll } from 'vue-happy-scroll'
  // 引入css，推荐将css放入main入口中引入一次即可。
  import 'vue-happy-scroll/docs/happy-scroll.css'
  export default {
      name: '',
      components: {HappyScroll} //在组件内注册
  }
</script>
当vue是全局变量时
//如果vue是全局变量,happyScroll自动全局安装。
if (typeof window !== 'undefined' && window.Vue) {
  Vue.component('happy-scroll', HappyScroll)
}
<html>
  <happy-scroll>
    <!-- 你的内容 -->
  </happy-scroll>
</html>
color
类型String
默认值rgba(51,51,51,0.2)
<happy-scroll color="rgba(51,51,51,0.2)">
  <!-- 你的内容 -->
</happy-scroll>
设置滚动条的颜色




    

建议使用rgba，这样可以为滚动条设置透明度，当然，如果你需要设置透明度的话。
类型Number|String
默认值4
  <happy-scroll size="8">
    <!-- 你的内容 -->
  </happy-scroll>
设置滚动条的大小。
对于竖向滚动条表示宽度，横向滚动条表示高度
min-length-h (*new)
类型Number
默认值40
单位px
<happy-scroll :min-length-h="20">
  <!-- 你的内容 -->
</happy-scroll>
设置横向滚动条最小的长度，当元素无限长或者宽的时候，会导致滚动条无限小，这种情况可以使用该属性。来设置最小的长度。
<happy-scroll :min-length-h="0.2">
  <!-- 你的内容 -->
</happy-scroll>
也可以设置百分比来限制最小长度(可视区域 * min-length-h)。假设可视区域的宽度为300px，那么滚动条为60px。
当min-length-h小于1的时候，会将其当作百分比来处理。
min-length-v (*new)
类型NUmber
默认值40
单位px
<happy-scroll :min-length-v="20">
  <!-- 你的内容 -->
</happy-scroll>
设置竖向滚动条最小的长度，当元素无限长或者宽的时候，会导致滚动条无限小，这种情况可以使用该属性。来设置最小的长度。
<happy-scroll :min-length-v="0.2">
  <!-- 你的内容 -->
</happy-scroll>
也可以设置百分比来限制最小长度(可视区域 * min-length-v)。假设可视区域的高度为200px，那么滚动条为40px。
当min-length-h小于1的时候，会将其当作百分比来处理。
scroll-top
类型Number|String
默认值0
修饰符sync
<happy-scroll scroll-top="20">
  <!-- 你的内容 -->
</happy-scroll>
<!-- 也可以增加 .sync 保持scroll-top同步 -->
<happy-scroll scroll-top.sync="20">
在组件mounted之后，设置容器距离顶部的距离。
相当于element.scrollTop 一致。
scroll-top的值会自动转换为数字，所以当值为固定的数字时(使用+转换的)，你无需增加:(v-bind)，直接写为scroll-top="20"即可。
scroll-left
类型Number|String
默认值0
修饰符sync
<happy-scroll scroll-left="20">
  <!-- 你的内容 -->
</happy-scroll>
<!-- 也可以增加 .sync 保持scroll-left -->
<happy-scroll scroll-top.left="20">
在组件mounted之后，设置容器距离左边的距离。
相当于element.scrollLeft 一致。
hide-vertical
类型 Boolean
默认值 false
<!-- 表示隐藏竖向滚动条 -->
<happy-scroll hide-vertical>
  <!-- 你的内容 -->
</happy-scroll>
隐藏竖向滚动条
hide-horizontal
类型 Boolean
默认值 false
<!-- 表示隐藏横向滚动条 -->
<happy-scroll hide-horizontal>
  <!-- 你的内容 -->
</happy-scroll>
隐藏横向滚动条
如果你不需要横向出现滚动条，可以设置hide-horizontal来提高性能。
resize
类型Boolean
默认值false
<!-- 表示开启监听容器大小变化 -->
<happy-scroll resize>
  <!-- 你的内容 -->
</happy-scroll>
如果你的容器大小是变化的(高度或者宽度可能随时发生变化的情况)，可使用resize来开启对容器大小变化的监听，当容器的宽高大于你设定的宽高时，会自动出现滚动条，反正会自动隐藏滚动条。
此功能当前版本依赖 element-resize-detector，目前正在寻找性能更高的办法，当然此插件的性能还是可以肯定的
smaller-move-h、smaller-move-v
类型String
默认值''
start
除1、2的值之外，其他所有值都认为是默认值
<happy-scroll smaller-move-v="start">
  <!-- 你的内容 -->
</happy-scroll>
当resize=true时，此配置才有效。
该属性表示当容器变小时，滚动条移动的方向。
smaller-move-h 内容变小时，横向滚动条移动的方向
smaller-move-v 内容变小时，竖向滚动条移动的方向
当设置为start时，表示变小之后，滚动条会移动到头部(对竖向滚动条来说是最上边，对横向滚动条来说是最左边)
当设置为end时，表示变小之后，滚动条会移动到尾部(对竖向滚动条来说是最下边，对横向滚动条来说是最右边)
当设置为''(默认值)时，表示在变小时，滚动条的位置不发生变化。
bigger-move-h、bigger-move-v
类型String
默认值''
start
除1、2的值之外，其他所有值都认为是默认值
<happy-scroll bigger-move-h="start">
  <!-- 你的内容 -->
</happy-scroll>
当resize=true时，此配置才有效。
该属性表示当容器大小变大时，滚动条移动的方向。
属性值与smaller-move-h原理一致。
类型Boolean
默认值false
<happy-scroll left>
  <!-- 你的内容 -->
</happy-scroll>
表示设置竖向滚动条依靠在左边。默认竖向滚动条在右边。
类型Boolean
默认值false
<happy-scroll top>
  <!-- 你的内容 -->
</happy-scroll>
表示设置横向滚动条依靠在上边。默认横向滚动条在下边。v
throttle
类型Number
默认值14
单位毫秒
设置鼠标拖动滚动条的节流时间，如果没有特殊的要求不建议修改此值。
horizontal-start
参数scrollLeft
在horizontal-start事件下，scrollLeft始终为0。
监听横向滚动条滚动到头部的事件。当scroll-left = 0时会触发该事件。
<happy-scroll @horizontal-start="yourHandler">
  <!-- 你的内容 -->
</happy-scroll>
horizontal-end
参数scrollLeft
监听横向滚动条滚动到尾部的事件。
<happy-scroll @horizontal-end="yourHandler">
  <!-- 你的内容 -->
</happy-scroll>
vertical-start
参数scrollTop
在vertical-start事件下，scrollTop始终为0
监听竖向滚动条滚动到头部的事件。当scroll-top = 0时会触发该事件。
<happy-scroll @vertical-start="yourHandler">
  <!-- 你的内容 -->
</happy-scroll>
vertical-end
参数scrollTop
监听竖向滚动条滚动到尾部的事件。
<happy-scroll @vertical-end="yourHandler">
  <!-- 你的内容 -->
</happy-scroll>
期待并欢迎您的PR。
但请您一定要遵守standard代码风格规范。
并且您只需要提交src目录下的源码即可，无需提交build之后的代码