Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
√ | √ | √ | √ | √ √ √ |
https://happy-js.github.io/vue-happy-scroll/
是一款基于vue2.0的滚动条插件。
- vue-happy-scroll
此插件致力解决原生滚动条在不同系统、不同浏览器中的丑陋表现,在保证原生滚动条功能可用的基础上实现了更丰富的功能、保证在所支持的浏览器下展现出风格一致、交互体验一致的滚动条。
它可以让你无需关心滚动条的兼容性问题,无需关心
的宽高,当设定
- 内容区域
属性后,可以根据内容大小
- resize
。 这里有对各种丰富的额外功能进行说明。
- 自动显示或隐藏滚动条
,这样可以跟随你的
- npm
配置去选择怎样打包。
- webpack
- npm i - D vue - happy - scroll
中版本保持同步。 通过以下方式引入即可:
- npm
可以访问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>
- String
- rgba(51,51,51,0.2)
- <happy-scroll color="rgba(51,51,51,0.2)">
- <!-- 你的内容 -->
- </happy-scroll>
建议使用,这样可以为滚动条设置透明度,当然,如果你需要设置透明度的话。
- rgba
- 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"
- Number|String
- 0
- sync
- <happy-scroll scroll-left="20">
- <!-- 你的内容 -->
- </happy-scroll>
- <!-- 也可以增加 .sync 保持scroll-left -->
- <happy-scroll scroll-top.left="20">
之后,设置
- mounted
距离左边的距离。
- 容器
相当于一致。
- element.scrollLeft
- Boolean
- false
- <!-- 表示隐藏竖向滚动条 -->
- <happy-scroll hide-vertical>
- <!-- 你的内容 -->
- </happy-scroll>
滚动条
- 竖向
- Boolean
- false
- <!-- 表示隐藏横向滚动条 -->
- <happy-scroll hide-horizontal>
- <!-- 你的内容 -->
- </happy-scroll>
滚动条
- 横向
- Boolean
- false
- <!-- 表示开启监听容器大小变化 -->
- <happy-scroll resize>
- <!-- 你的内容 -->
- </happy-scroll>
大小是变化的(
- 你的容器
或者
- 高度
可能随时发生变化的情况),可使用
- 宽度
来开启对容器大小变化的监听,当
- resize
的
- 容器
大于你设定的
- 宽高
时,会自动出现滚动条,反正会自动隐藏滚动条。
- 宽高
此功能当前版本依赖 element-resize-detector,目前正在寻找性能更高的办法,当然此插件的性能还是可以肯定的
- String
- ''
- start
- end
的值之外,其他所有值都认为是
- 1、2
- 默认值
- <happy-scroll smaller-move-v="start">
- <!-- 你的内容 -->
- </happy-scroll>
当该属性表示当容器时,此配置才有效。
- resize=true
时,滚动条移动的方向。
- 变小
滚动条移动的方向
- 横向
滚动条移动的方向
- 竖向
时,表示变小之后,滚动条会移动到
- start
(对
- 头部
滚动条来说是
- 竖向
,对
- 最上边
滚动条来说是
- 横向
) 当设置为
- 最左边
时,表示变小之后,滚动条会移动到
- end
(对
- 尾部
滚动条来说是
- 竖向
,对
- 最下边
滚动条来说是
- 横向
) 当设置为
- 最右边
(默认值)时,表示在变小时,滚动条的位置不发生变化。
- ''
- String
- ''
- start
- end
的值之外,其他所有值都认为是
- 1、2
- 默认值
- <happy-scroll bigger-move-h="start">
- <!-- 你的内容 -->
- </happy-scroll>
当该属性表示当容器大小时,此配置才有效。
- resize=true
时,滚动条移动的方向。 属性值与
- 变大
原理一致。
- smaller-move-h
- Number
- 14
- 毫秒
期待并欢迎您的PR。 但请您一定要遵守standard代码风格规范。 并且您只需要提交
目录下的源码即可,
- src
提交
- 无需
之后的代码
- build
MIT
Copyright (c) 2017-present, 唐道海
来源: https://www.ctolib.com/happy-js-vue-happy-scroll.html