vue滚动条插件vue-happy-scroll

使用的话

1.npm install vue-happy-scroll --save-dev;

2.注册

2.1全局注册

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

2.2组件内注册

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

3 .使用代码段

需要注意的是: (1).item-body需要设置宽高,

(2).happy-scroll组件里面只能放一个dom结构,比如.item-container,.item-container里面放多少内容，都随便，最外层只有一个结构

  <div class="item-body">
       <happy-scroll color="rgba(51,51,51,0.2)" size="10" resize>
              <div class="item-container">
                   //你的内容
              </div>
      </happy-scroll>
    </div>

4. 使用效果

5.官网api中一些常用的配置属性

5.1.color(String):设置滚动条的颜色(ps：建议使用rgba，这样可以为滚动条设置透明度，当然，如果你需要设置透明度的话。)

5.2 size(Number|String):设置滚动条的大小。(ps：对于竖向滚动条表示宽度，横向滚动条表示高度)

5.3 min-length-h(Number)：设置横向滚动条最小的长度，当元素无限长或者宽的时候，会导致滚动条无限小，这种情况可以使用该属性。来设置最小的长度。（ps:也可以设置百分比来限制最小长度(可视区域 * min-length-h)。假设可视区域的宽度为300px，那么滚动条为60px。当min-length-h小于1的时候，会将其当作百分比来处理。）

5.4 min-length-v(Number):设置 竖向滚动条最小的长度，当元素无限长或者宽的时候，会导致滚动条无限小，这种情况可以使用该属性。来设置最小的长度。(ps:也可以设置百分比来限制最小长度(可视区域 * min-length-v)。假设可视区域的高度为200px，那么滚动条为40px。当min-length-h小于1的时候，会将其当作百分比来处理。)

5.5 scroll-top(Number|String):在组件mounted之后，设置容器距离顶部的距离。

5.6 scroll-left(Number|String):在组件mounted之后，设置容器距离左边的距离。

5.7 hide-vertical(Boolean):隐藏竖向滚动条

5.8 hide-horizontal(Boolean):隐藏横向滚动条(ps:如果你不需要横向出现滚动条，可以设置hide-horizontal来提高性能。)

5.9 resize(Boolean):如果你的容器大小是变化的(高度或者宽度可能随时发生变化的情况)，可使用resize来开启对容器大小变化的监听，当容器的宽高大于你设定的宽高时，会自动出现滚动条，反正会自动隐藏滚动条。

vue滚动条插件vue-happy-scroll

悦读