![\"IE](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\")
](http://godban.github.io/browsers-support-badges/)IE / Edge | [![\"Firefox\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\")
](http://godban.github.io/browsers-support-badges/)Firefox | [![\"Chrome\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\")
](http://godban.github.io/browsers-support-badges/)Chrome | [![\"Safari\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\")
](http://godban.github.io/browsers-support-badges/)Safari | [![\"Opera\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\")
](http://godban.github.io/browsers-support-badges/)Opera |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |\n\n### 重构待测\n1. 测嵌套\n2. 触发各事件 👌\n3. 平滑滚动\n4. 锚点跳转 👌\n5. 键盘事件，仍然需要一个自动focus的操作\n6. 变颜色，换位置，随机改变大小 👌\n7. 各方法测试 👌\n8. safari 多次触发触底触顶事件\n### 特性\n\n- [x] 默认是 MAC 系统的主题，也可以自定义轨道和滑块颜色\n- [x] 可以设置滚动条显示在左边或上面\n- [x] 自动显隐滚动条\n- [x] 动态手动设置滚动条的 scrollTop 和 scrollLeft\n- [x] 支持一键滚动到底部\n- [x] 内容随意增减，父级容器随便改变大小\n- [x] 支持嵌套\n\n### 效果预览\n\nhttps://isluo.com/work/vue-ohyeah-scroll/\n\n### 安装\n\n```js\n yarn add vue-ohyeah-scroll\n```\n\n### 使用\n\n全局注册\n\n```js\nimport Ohyeah from 'vue-ohyeah-scroll';\nVue.use(Ohyeah);\n```\n\n局部注册\n\n```js\nimport { Ohyeah } from 'vue-ohyeah-scroll';\n\nexport default {\n components: {\n Ohyeah,\n },\n};\n```\n\n组件中使用\n\n```js\n\n | 事件名 | \n描述 | \n返回值 | \n
|---|---|---|
| onVerStart | \n每次垂直滚动条抵达顶部时将触发一次 | \n\n \n{\n offsetHeight: 内容区的总高度,\n offsetWidth: 内容区的总宽度,\n height: 容器的高度,\n width: 容器的宽度,\n scrollTop: 内容区已被滚到上边去的距离,\n scrollLeft: 内容区已被滚到左边去的距离\n}\n \n | \n
| onVerEnd | \n每次垂直滚动条抵达底部时将触发一次 | \n同上 | \n
| onHorStart | \n每次水平滚动条抵达最左边时将触发一次 | \n同上 | \n
| onHorEnd | \n每次水平滚动条抵达最右边时将触发一次 | \n同上 | \n
| onScroll | \n当滚动条的位置变化时就会触发一次，无论是垂直滚动条还是水平滚动条 | \n同上 | \n
](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 |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |\n\n### 重构待测\n1. 测嵌套 👌\n2. 触发各事件 👌\n3. 平滑滚动\n4. 锚点跳转 👌\n5. 键盘事件 👌\n6. 变颜色，换位置，随机改变大小 👌\n7. 各方法测试 👌\n8. safari 多次触发触底触顶事件 👌\n9. 整理代码 👌\n10. padding 2px 👌\n### 特性\n\n- [x] 默认是 MAC 系统的主题，也可以自定义轨道和滑块颜色\n- [x] 可以设置滚动条显示在左边或上面\n- [x] 自动显隐滚动条\n- [x] 动态手动设置滚动条的 scrollTop 和 scrollLeft\n- [x] 支持一键滚动到底部\n- [x] 内容随意增减，父级容器随便改变大小\n- [x] 支持嵌套\n\n### 效果预览\n\nhttps://isluo.com/work/vue-ohyeah-scroll/\n\n### 安装\n\n```js\n yarn add vue-ohyeah-scroll\n```\n\n### 使用\n\n全局注册\n\n```js\nimport Ohyeah from 'vue-ohyeah-scroll';\nVue.use(Ohyeah);\n```\n\n局部注册\n\n```js\nimport { Ohyeah } from 'vue-ohyeah-scroll';\n\nexport default {\n components: {\n Ohyeah,\n },\n};\n```\n\n组件中使用\n\n```js\n\n | 事件名 | \n描述 | \n返回值 | \n
|---|---|---|
| onVerStart | \n每次垂直滚动条抵达顶部时将触发一次 | \n\n \n{\n offsetHeight: 内容区的总高度,\n offsetWidth: 内容区的总宽度,\n height: 容器的高度,\n width: 容器的宽度,\n scrollTop: 内容区已被滚到上边去的距离,\n scrollLeft: 内容区已被滚到左边去的距离\n}\n \n | \n
| onVerEnd | \n每次垂直滚动条抵达底部时将触发一次 | \n同上 | \n
| onHorStart | \n每次水平滚动条抵达最左边时将触发一次 | \n同上 | \n
| onHorEnd | \n每次水平滚动条抵达最右边时将触发一次 | \n同上 | \n
| onScroll | \n当滚动条的位置变化时就会触发一次，无论是垂直滚动条还是水平滚动条 | \n同上 | \n
](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 |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |\n\n### 重构待测\n1. 测嵌套 👌\n2. 触发各事件 👌\n3. 平滑滚动\n4. 锚点跳转 👌\n5. 键盘事件 👌\n6. 变颜色，换位置，随机改变大小 👌\n7. 各方法测试 👌\n8. safari 多次触发触底触顶事件 👌\n9. 整理代码 👌\n10. padding 2px 👌\n### 特性\n\n- [x] 默认是 MAC 系统的主题，也可以自定义轨道和滑块颜色\n- [x] 可以设置滚动条显示在左边或上面\n- [x] 自动显隐滚动条\n- [x] 动态手动设置滚动条的 scrollTop 和 scrollLeft\n- [x] 支持一键滚动到底部\n- [x] 内容随意增减，父级容器随便改变大小\n- [x] 支持嵌套\n\n### 效果预览\n\nhttps://isluo.com/work/vue-ohyeah-scroll/\n\n### 安装\n\n```js\n yarn add vue-ohyeah-scroll\n```\n\n### 使用\n\n全局注册\n\n```js\nimport Ohyeah from 'vue-ohyeah-scroll';\nVue.use(Ohyeah);\n```\n\n局部注册\n\n```js\nimport { Ohyeah } from 'vue-ohyeah-scroll';\n\nexport default {\n components: {\n Ohyeah,\n },\n};\n```\n\n组件中使用\n\n```js\n\n | 事件名 | \n描述 | \n返回值 | \n
|---|---|---|
| onVerStart | \n每次垂直滚动条抵达顶部时将触发一次 | \n\n \n{\n offsetHeight: 内容区的总高度,\n offsetWidth: 内容区的总宽度,\n height: 容器的高度,\n width: 容器的宽度,\n scrollTop: 内容区已被滚到上边去的距离,\n scrollLeft: 内容区已被滚到左边去的距离\n}\n \n | \n
| onVerEnd | \n每次垂直滚动条抵达底部时将触发一次 | \n同上 | \n
| onHorStart | \n每次水平滚动条抵达最左边时将触发一次 | \n同上 | \n
| onHorEnd | \n每次水平滚动条抵达最右边时将触发一次 | \n同上 | \n
| onScroll | \n当滚动条的位置变化时就会触发一次，无论是垂直滚动条还是水平滚动条 | \n同上 | \n
](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 |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |\n\n### 重构待测\n1. 测嵌套 👌\n2. 触发各事件 👌\n3. 平滑滚动\n4. 锚点跳转 👌\n5. 键盘事件 👌\n6. 变颜色，换位置，随机改变大小 👌\n7. 各方法测试 👌\n8. safari 多次触发触底触顶事件 👌\n9. 整理代码 👌\n10. padding 2px 👌\n### 特性\n\n- [x] 默认是 MAC 系统的主题，也可以自定义轨道和滑块颜色\n- [x] 可以设置滚动条显示在左边或上面\n- [x] 自动显隐滚动条\n- [x] 动态手动设置滚动条的 scrollTop 和 scrollLeft\n- [x] 支持一键滚动到底部\n- [x] 内容随意增减，父级容器随便改变大小\n- [x] 支持嵌套\n\n### 效果预览\n\nhttps://isluo.com/work/vue-ohyeah-scroll/\n\n### 安装\n\n```js\n yarn add vue-ohyeah-scroll\n```\n\n### 使用\n\n全局注册\n\n```js\nimport Ohyeah from 'vue-ohyeah-scroll';\nVue.use(Ohyeah);\n```\n\n局部注册\n\n```js\nimport { Ohyeah } from 'vue-ohyeah-scroll';\n\nexport default {\n components: {\n Ohyeah,\n },\n};\n```\n\n组件中使用\n\n```js\n\n | 事件名 | \n描述 | \n返回值 | \n
|---|---|---|
| onVerStart | \n每次垂直滚动条抵达顶部时将触发一次 | \n\n \n{\n offsetHeight: 内容区的总高度,\n offsetWidth: 内容区的总宽度,\n height: 容器的高度,\n width: 容器的宽度,\n scrollTop: 内容区已被滚到上边去的距离,\n scrollLeft: 内容区已被滚到左边去的距离\n}\n \n | \n
| onVerEnd | \n每次垂直滚动条抵达底部时将触发一次 | \n同上 | \n
| onHorStart | \n每次水平滚动条抵达最左边时将触发一次 | \n同上 | \n
| onHorEnd | \n每次水平滚动条抵达最右边时将触发一次 | \n同上 | \n
| onScroll | \n当滚动条的位置变化时就会触发一次，无论是垂直滚动条还是水平滚动条 | \n同上 | \n
](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 |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |\n\n### 重构待测\n1. 测嵌套 👌\n2. 触发各事件 👌\n3. 平滑滚动\n4. 锚点跳转 👌\n5. 键盘事件 👌\n6. 变颜色，换位置，随机改变大小 👌\n7. 各方法测试 👌\n8. safari 多次触发触底触顶事件 👌\n9. 整理代码 👌\n10. padding 2px 👌\n11. firefox scrollTo滚动到顶部 模拟滚动条没动\n12. IE11 轨道上点击，位置没对\n13. 轨道上点击 needSmooth问题\n\n### 特性\n\n- [x] 默认是 MAC 系统的主题，也可以自定义轨道和滑块颜色\n- [x] 可以设置滚动条显示在左边或上面\n- [x] 自动显隐滚动条\n- [x] 动态手动设置滚动条的 scrollTop 和 scrollLeft\n- [x] 支持一键滚动到底部\n- [x] 内容随意增减，父级容器随便改变大小\n- [x] 支持嵌套\n\n### 效果预览\n\nhttps://isluo.com/work/vue-ohyeah-scroll/\n\n### 安装\n\n```js\n yarn add vue-ohyeah-scroll\n```\n\n### 使用\n\n全局注册\n\n```js\nimport Ohyeah from 'vue-ohyeah-scroll';\nVue.use(Ohyeah);\n```\n\n局部注册\n\n```js\nimport { Ohyeah } from 'vue-ohyeah-scroll';\n\nexport default {\n components: {\n Ohyeah,\n },\n};\n```\n\n组件中使用\n\n```js\n\n | 事件名 | \n描述 | \n返回值 | \n
|---|---|---|
| onVerStart | \n每次垂直滚动条抵达顶部时将触发一次 | \n\n \n{\n offsetHeight: 内容区的总高度,\n offsetWidth: 内容区的总宽度,\n height: 容器的高度,\n width: 容器的宽度,\n scrollTop: 内容区已被滚到上边去的距离,\n scrollLeft: 内容区已被滚到左边去的距离\n}\n \n | \n
| onVerEnd | \n每次垂直滚动条抵达底部时将触发一次 | \n同上 | \n
| onHorStart | \n每次水平滚动条抵达最左边时将触发一次 | \n同上 | \n
| onHorEnd | \n每次水平滚动条抵达最右边时将触发一次 | \n同上 | \n
| onScroll | \n当滚动条的位置变化时就会触发一次，无论是垂直滚动条还是水平滚动条 | \n同上 | \n
](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 |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |\n\n### 重构待测\n\n1. 测嵌套 👌\n2. 触发各事件 👌\n3. 平滑滚动 👌\n4. 锚点跳转 👌\n5. 键盘事件 👌\n6. 变颜色，换位置，随机改变大小 👌\n7. 各方法测试 👌\n8. safari 多次触发触底触顶事件 👌\n9. 整理代码 👌\n10. padding 2px 👌\n11. firefox scrollTo 滚动到顶部 模拟滚动条没动 👌 firefox 不触发 scroll 事件\n12. IE11 轨道上点击，位置没对 👌 IE11 不支持 Number.isFinite\n13. 轨道上点击 needSmooth 问题 👌\n14. 移动端不渲染，样式还原\n15. scrollTo 兼容不支持原生平滑的浏览器\n\n### 特性\n\n- [x] 默认是 MAC 系统的主题，也可以自定义轨道和滑块颜色\n- [x] 可以设置滚动条显示在左边或上面\n- [x] 自动显隐滚动条\n- [x] 动态手动设置滚动条的 scrollTop 和 scrollLeft\n- [x] 支持一键滚动到底部\n- [x] 内容随意增减，父级容器随便改变大小\n- [x] 支持嵌套\n\n### 效果预览\n\nhttps://isluo.com/work/vue-ohyeah-scroll/\n\n### 安装\n\n```js\n yarn add vue-ohyeah-scroll\n```\n\n### 使用\n\n全局注册\n\n```js\nimport { Ohyeah } from \"vue-ohyeah-scroll\";\nVue.use(Ohyeah);\n```\n\n局部注册\n\n```js\nimport { Ohyeah } from \"vue-ohyeah-scroll\";\n\nexport default {\n components: {\n Ohyeah,\n },\n};\n```\n\n组件中使用\n\n```js\n\n | 事件名 | \n描述 | \n返回值 | \n
|---|---|---|
| onVerStart | \n每次垂直滚动条抵达顶部时将触发一次 | \n\n \n{\n offsetHeight: 内容区的总高度,\n offsetWidth: 内容区的总宽度,\n height: 容器的高度,\n width: 容器的宽度,\n scrollTop: 内容区已被滚到上边去的距离,\n scrollLeft: 内容区已被滚到左边去的距离\n}\n \n | \n
| onVerEnd | \n每次垂直滚动条抵达底部时将触发一次 | \n同上 | \n
| onHorStart | \n每次水平滚动条抵达最左边时将触发一次 | \n同上 | \n
| onHorEnd | \n每次水平滚动条抵达最右边时将触发一次 | \n同上 | \n
| onScroll | \n当滚动条的位置变化时就会触发一次，无论是垂直滚动条还是水平滚动条 | \n同上 | \n
{{ index }}
\n](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 |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |\n\n### 重构待测\n\n1. 测嵌套 👌\n2. 触发各事件 👌\n3. 平滑滚动 👌\n4. 锚点跳转 👌\n5. 键盘事件 👌\n6. 变颜色，换位置，随机改变大小 👌\n7. 各方法测试 👌\n8. safari 多次触发触底触顶事件 👌\n9. 整理代码 👌\n10. padding 2px 👌\n11. firefox scrollTo 滚动到顶部 模拟滚动条没动 👌 firefox 不触发 scroll 事件\n12. IE11 轨道上点击，位置没对 👌 IE11 不支持 Number.isFinite\n13. 轨道上点击 needSmooth 问题 👌\n14. 移动端不渲染，样式还原\n15. scrollTo 兼容不支持原生平滑的浏览器\n\n### 特性\n\n- [x] 默认是 MAC 系统的主题，也可以自定义轨道和滑块颜色\n- [x] 可以设置滚动条显示在左边或上面\n- [x] 自动显隐滚动条\n- [x] 动态手动设置滚动条的 scrollTop 和 scrollLeft\n- [x] 支持一键滚动到底部\n- [x] 内容随意增减，父级容器随便改变大小\n- [x] 支持嵌套\n\n### 效果预览\n\nhttps://isluo.com/work/vue-ohyeah-scroll/\n\n### 安装\n\n```js\n yarn add vue-ohyeah-scroll\n```\n\n### 使用\n\n全局注册\n\n```js\nimport { Ohyeah } from \"vue-ohyeah-scroll\";\nVue.use(Ohyeah);\n```\n\n局部注册\n\n```js\nimport { Ohyeah } from \"vue-ohyeah-scroll\";\n\nexport default {\n components: {\n Ohyeah,\n },\n};\n```\n\n组件中使用\n\n```js\n\n | 事件名 | \n描述 | \n返回值 | \n
|---|---|---|
| onVerStart | \n每次垂直滚动条抵达顶部时将触发一次 | \n\n \n{\n offsetHeight: 内容区的总高度,\n offsetWidth: 内容区的总宽度,\n height: 容器的高度,\n width: 容器的宽度,\n scrollTop: 内容区已被滚到上边去的距离,\n scrollLeft: 内容区已被滚到左边去的距离\n}\n \n | \n
| onVerEnd | \n每次垂直滚动条抵达底部时将触发一次 | \n同上 | \n
| onHorStart | \n每次水平滚动条抵达最左边时将触发一次 | \n同上 | \n
| onHorEnd | \n每次水平滚动条抵达最右边时将触发一次 | \n同上 | \n
| onScroll | \n当滚动条的位置变化时就会触发一次，无论是垂直滚动条还是水平滚动条 | \n同上 | \n
{{ index }}
\n](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 |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |\n\n### 重构待测\n\n1. 测嵌套 👌\n2. 触发各事件 👌\n3. 平滑滚动 👌\n4. 锚点跳转 👌\n5. 键盘事件 👌\n6. 变颜色，换位置，随机改变大小 👌\n7. 各方法测试 👌\n8. safari 多次触发触底触顶事件 👌\n9. 整理代码 👌\n10. padding 2px 👌\n11. firefox scrollTo 滚动到顶部 模拟滚动条没动 👌 firefox 不触发 scroll 事件\n12. IE11 轨道上点击，位置没对 👌 IE11 不支持 Number.isFinite\n13. 轨道上点击 needSmooth 问题 👌\n14. 移动端不渲染，样式还原\n15. scrollTo 兼容不支持原生平滑的浏览器\n\n### 特性\n\n- [x] 默认是 MAC 系统的主题，也可以自定义轨道和滑块颜色\n- [x] 可以设置滚动条显示在左边或上面\n- [x] 自动显隐滚动条\n- [x] 动态手动设置滚动条的 scrollTop 和 scrollLeft\n- [x] 支持一键滚动到底部\n- [x] 内容随意增减，父级容器随便改变大小\n- [x] 支持嵌套\n\n### 效果预览\n\nhttps://isluo.com/work/vue-ohyeah-scroll/\n\n### 安装\n\n```js\n yarn add vue-ohyeah-scroll\n```\n\n### 使用\n\n全局注册\n\n```js\nimport { Ohyeah } from \"vue-ohyeah-scroll\";\nVue.use(Ohyeah);\n```\n\n局部注册\n\n```js\nimport { Ohyeah } from \"vue-ohyeah-scroll\";\n\nexport default {\n components: {\n Ohyeah,\n },\n};\n```\n\n组件中使用\n\n```js\n\n | 事件名 | \n描述 | \n返回值 | \n
|---|---|---|
| onVerStart | \n每次垂直滚动条抵达顶部时将触发一次 | \n\n \n{\n offsetHeight: 内容区的总高度,\n offsetWidth: 内容区的总宽度,\n height: 容器的高度,\n width: 容器的宽度,\n scrollTop: 内容区已被滚到上边去的距离,\n scrollLeft: 内容区已被滚到左边去的距离\n}\n \n | \n
| onVerEnd | \n每次垂直滚动条抵达底部时将触发一次 | \n同上 | \n
| onHorStart | \n每次水平滚动条抵达最左边时将触发一次 | \n同上 | \n
| onHorEnd | \n每次水平滚动条抵达最右边时将触发一次 | \n同上 | \n
| onScroll | \n当滚动条的位置变化时就会触发一次，无论是垂直滚动条还是水平滚动条 | \n同上 | \n
{{ index }}
\n](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 |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |\n\n### 重构待测/未来计划\n\n1. 测嵌套 👌\n2. 触发各事件 👌\n3. 平滑滚动 👌\n4. 锚点跳转 👌\n5. 键盘事件 👌\n6. 变颜色，换位置，随机改变大小 👌\n7. 各方法测试 👌\n8. safari 多次触发触底触顶事件 👌\n9. 整理代码 👌\n10. padding 2px 👌\n11. firefox scrollTo 滚动到顶部 模拟滚动条没动 👌 firefox 不触发 scroll 事件\n12. IE11 轨道上点击，位置没对 👌 IE11 不支持 Number.isFinite\n13. 轨道上点击 needSmooth 问题 👌\n14. 移动端不渲染，样式还原 👌\n15. scrollTo 兼容不支持原生平滑的浏览器\n16. 自动隐藏true时，不滚动过一段时间自动隐藏\n\n### 特性\n\n- [x] 默认是 MAC 系统的主题，也可以自定义轨道和滑块颜色\n- [x] 可以设置滚动条显示在左边或上面\n- [x] 自动显隐滚动条\n- [x] 动态手动设置滚动条的 scrollTop 和 scrollLeft\n- [x] 支持一键滚动到底部\n- [x] 内容随意增减，父级容器随便改变大小\n- [x] 支持嵌套\n\n### 效果预览\n\nhttps://isluo.com/work/vue-ohyeah-scroll/\n\n### 安装\n\n```js\n yarn add vue-ohyeah-scroll\n```\n\n### 使用\n\n全局注册\n\n```js\nimport { Ohyeah } from \"vue-ohyeah-scroll\";\nVue.use(Ohyeah);\n```\n\n局部注册\n\n```js\nimport { Ohyeah } from \"vue-ohyeah-scroll\";\n\nexport default {\n components: {\n Ohyeah,\n },\n};\n```\n\n组件中使用\n\n```js\n\n | 事件名 | \n描述 | \n返回值 | \n
|---|---|---|
| onVerStart | \n每次垂直滚动条抵达顶部时将触发一次 | \n\n \n{\n offsetHeight: 内容区的总高度,\n offsetWidth: 内容区的总宽度,\n height: 容器的高度,\n width: 容器的宽度,\n scrollTop: 内容区已被滚到上边去的距离,\n scrollLeft: 内容区已被滚到左边去的距离\n}\n \n | \n
| onVerEnd | \n每次垂直滚动条抵达底部时将触发一次 | \n同上 | \n
| onHorStart | \n每次水平滚动条抵达最左边时将触发一次 | \n同上 | \n
| onHorEnd | \n每次水平滚动条抵达最右边时将触发一次 | \n同上 | \n
| onScroll | \n当滚动条的位置变化时就会触发一次，无论是垂直滚动条还是水平滚动条 | \n同上 | \n
{{ index }}
\n