https://github.com/javaluo/vue-ohyeah-scroll
:star2: vue滚动条美化组件，默认MAC风格，兼容各种浏览器
https://github.com/javaluo/vue-ohyeah-scroll
happy-scroll scroll vue vue-scroll
Last synced: 3 months ago
JSON representation
:star2: vue滚动条美化组件，默认MAC风格，兼容各种浏览器
- Host: GitHub
- URL: https://github.com/javaluo/vue-ohyeah-scroll
- Owner: javaLuo
- License: apache-2.0
- Created: 2019-04-19T03:43:27.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T20:22:08.000Z (over 2 years ago)
- Last Synced: 2025-03-18T06:22:35.529Z (3 months ago)
- Topics: happy-scroll, scroll, vue, vue-scroll
- Language: Vue
- Homepage: https://isluo.com/work/vue-ohyeah-scroll/
- Size: 1.02 MB
- Stars: 13
- Watchers: 2
- Forks: 0
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-ohyeah-scroll
[](https://www.npmjs.com/package/vue-ohyeah-scroll)   [](https://www.npmjs.com/package/vue-ohyeah-scroll)
仿 MAC 系统的滚动条
> PC 端，移动端都能用
| [
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)Opera |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
### 重构待测/未来计划
1. 测嵌套 👌
2. 触发各事件 👌
3. 平滑滚动 👌
4. 锚点跳转 👌
5. 键盘事件 👌
6. 变颜色，换位置，随机改变大小 👌
7. 各方法测试 👌
8. safari 多次触发触底触顶事件 👌
9. 整理代码 👌
10. padding 2px 👌
11. firefox scrollTo 滚动到顶部 模拟滚动条没动 👌 firefox 不触发 scroll 事件
12. IE11 轨道上点击，位置没对 👌 IE11 不支持 Number.isFinite
13. 轨道上点击 needSmooth 问题 👌
14. 移动端不渲染，样式还原 👌
15. scrollTo 兼容不支持原生平滑的浏览器
16. 自动隐藏true时，不滚动过一段时间自动隐藏
### 特性
- [x] 默认是 MAC 系统的主题，也可以自定义轨道和滑块颜色
- [x] 可以设置滚动条显示在左边或上面
- [x] 自动显隐滚动条
- [x] 动态手动设置滚动条的 scrollTop 和 scrollLeft
- [x] 支持一键滚动到底部
- [x] 内容随意增减，父级容器随便改变大小
- [x] 支持嵌套
### 效果预览
https://isluo.com/work/vue-ohyeah-scroll/
### 安装
```js
yarn add vue-ohyeah-scroll
```
### 使用
全局注册
```js
import { Ohyeah } from "vue-ohyeah-scroll";
Vue.use(Ohyeah);
```
局部注册
```js
import { Ohyeah } from "vue-ohyeah-scroll";
export default {
components: {
Ohyeah,
},
};
```
组件中使用
```js
...
```
### 自定义属性
| 属性名 | 类型 | 默认值 | 描述 |
| ------------ | ------------- | ----------- | ------------------------------------------------------------------------------------------------------- |
| id | String | 随机数 | 一个唯一的 ID，可以不填 |
| width | Number,String | 100% | 容器宽度，默认贴合父级(父级需要有宽度)，也可自己设置，接受合法的 CSS 值，传数字会转换成 px |
| height | Number,String | 100% | 容器高度，默认贴合父级(父级需要有高度)，也可自己设置，接受合法的 CSS 值，传数字会转换成 px |
| breadth | Number | 6 | 滑块的粗细，单位: px |
| thumbColor | String | #7f7f7f | 滑块的颜色，接受 CSS 颜色值 |
| trackColor | String | transparent | 轨道的颜色，接受 CSS 颜色值 |
| autoHide | Boolean | true | 是否自动隐藏滚动条，鼠标在区域内才显示 |
| left | Boolean | false | 是否把垂直滚动条放在容器的左边 |
| top | Boolean | false | 是否把水平滚动条放在容器的顶端 |
| noVer | Boolean | false | 是否禁用垂直滚动条(overflow-y:hidden) |
| noHor | Boolean | false | 是否禁用水平滚动条(overflow-x:hidden) |
| minLength | Number | 20 | 当内容无限多的时候，滑块最短不得低于此值，单位: px |
| resizeObject | Boolean | false | 如果存在监听不到内容高度变化的情况可以把这个值改为 true 试试，（nuxt.js 打包后 firefox 发现有这种情况） |
### 自定义事件
事件名
描述
返回值
onVerStart
每次垂直滚动条抵达顶部时将触发一次
{
offsetHeight: 内容区的总高度,
offsetWidth: 内容区的总宽度,
height: 容器的高度,
width: 容器的宽度,
scrollTop: 内容区已被滚到上边去的距离,
scrollLeft: 内容区已被滚到左边去的距离
}
onVerEnd
每次垂直滚动条抵达底部时将触发一次
同上
onHorStart
每次水平滚动条抵达最左边时将触发一次
同上
onHorEnd
每次水平滚动条抵达最右边时将触发一次
同上
onScroll
当滚动条的位置变化时就会触发一次，无论是垂直滚动条还是水平滚动条
同上
### 自身方法
| 方法名 | 参数 | 描述 |
| ------------- | ------------------------------------ | ------------------------------------------------------ |
| scrollTo | (x:number,y:number,isSmooth:boolean) | 滚动到指定的位置,x 水平，y 垂直, isSmooth 是否平滑过度 |
| getScrollInfo | 无 | 获取当前滚动条各种信息 |
如何使用自身方法：
```vue
...
export default {
methods: {
scrollTo() {
// 水平保持原位，垂直滚到100px处，平滑过度
this.$refs.oh1.scrollTo(null, 100, true);
},
scrollToEnd() {
// 水平滚到最左边，垂直滚到底，瞬间完成
this.$refs.oh1.scrollTo(0, "end", false);
},
getScrollInfo() {
// 获取当前滚动条各种信息
const msg = this.$refs.oh1.getScrollInfo();
/**
* height: 内容区可见高度,不包括边框
* width: 内容区可见宽度,不包括边框
* clientHeight: 同height,
* clientWidth: 同width,
* offsetHeight: 内容区高度,包括边框
* offsetWidth: 内容区宽度，包括边框,
* scrollTop: 内容区已被滚到上边去的距离,
* scrollLeft: 内容区已被滚到左边去的距离,
* scrollHeight: 内容区真实总高度,包括看不见的区域
* scrollWidth: 内容区真实总宽度,包括看不见的区域
* */
},
},
};
```
### 完整例子
```vue
{{ index }}
import { Ohyeah } from "vue-ohyeah-scroll";
export default {
data(){
return {
testData: new Array(100).fill("")
}
}
components:{
Ohyeah
}
}
```
### 注意事项
1.
> **scrollTo(x,y,isSmooth)** 方法
> 平滑滚动使用的是`scroll-behavior: smooth;`,目前`chrome`,`firefox`,`opera`支持
> **但是**：浏览器水平滚动条和垂直滚动条是互斥的，当水平正在滚时，垂直滚不动，反之亦然。浏览器始终只会有一个方向处于滚动中
> **所以**：如果设置了`isSmooth`为`true`,那么不要同时设置 x 和 y,至少有一个应该为`null`
2.
> 如果你不设置 ohyeah 的 width 和 height 属性，或者设置为百分比，那么就需要一个具有高度和宽度的父级元素来包裹 ohyeah
### 更新
- 0.5.6 调整了安卓手机上原生滚动条的样式
- 0.5.x 重构了,现在基于原生滚动条的默认行为