{"id":16773207,"url":"https://github.com/javaluo/vue-ohyeah-scroll","last_synced_at":"2025-03-21T23:34:23.054Z","repository":{"id":39549430,"uuid":"182197056","full_name":"javaLuo/vue-ohyeah-scroll","owner":"javaLuo","description":":star2: vue滚动条美化组件，默认MAC风格，兼容各种浏览器","archived":false,"fork":false,"pushed_at":"2023-01-03T20:22:08.000Z","size":1073,"stargazers_count":13,"open_issues_count":24,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T06:22:35.529Z","etag":null,"topics":["happy-scroll","scroll","vue","vue-scroll"],"latest_commit_sha":null,"homepage":"https://isluo.com/work/vue-ohyeah-scroll/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/javaLuo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-19T03:43:27.000Z","updated_at":"2025-03-14T09:24:26.000Z","dependencies_parsed_at":"2023-02-01T09:46:59.503Z","dependency_job_id":null,"html_url":"https://github.com/javaLuo/vue-ohyeah-scroll","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Fvue-ohyeah-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Fvue-ohyeah-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Fvue-ohyeah-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Fvue-ohyeah-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javaLuo","download_url":"https://codeload.github.com/javaLuo/vue-ohyeah-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244885403,"owners_count":20526292,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["happy-scroll","scroll","vue","vue-scroll"],"created_at":"2024-10-13T06:45:01.792Z","updated_at":"2025-03-21T23:34:22.760Z","avatar_url":"https://github.com/javaLuo.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-ohyeah-scroll\n\n[![npm](https://img.shields.io/npm/v/vue-ohyeah-scroll.svg)](https://www.npmjs.com/package/vue-ohyeah-scroll) ![NPM](https://img.shields.io/npm/l/vue-ohyeah-scroll.svg?style=popout) ![GitHub last commit](https://img.shields.io/github/last-commit/javaLuo/vue-ohyeah-scroll.svg?style=popout) [![npm downloads](https://img.shields.io/npm/dt/vue-ohyeah-scroll.svg)](https://www.npmjs.com/package/vue-ohyeah-scroll)\n\n仿 MAC 系统的滚动条\n\n\u003e PC 端，移动端都能用\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eOpera |\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\n\u003ca href=\"https://isluo.com/work/vue-ohyeah-scroll\" target=\"_blank\" rel=\"nofollow me noopener noreferrer\"\u003ehttps://isluo.com/work/vue-ohyeah-scroll/\u003c/a\u003e\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\u003ctemplate\u003e\n  \u003cOhyeah width=\"100vw\" height=\"100vh\"\u003e\n    ...\n  \u003c/Ohyeah\u003e\n\u003c/template\u003e\n```\n\n### 自定义属性\n\n| 属性名       | 类型          | 默认值      | 描述                                                                                                    |\n| ------------ | ------------- | ----------- | ------------------------------------------------------------------------------------------------------- |\n| id           | String        | 随机数      | 一个唯一的 ID，可以不填                                                                                 |\n| width        | Number,String | 100%        | 容器宽度，默认贴合父级(父级需要有宽度)，也可自己设置，接受合法的 CSS 值，传数字会转换成 px              |\n| height       | Number,String | 100%        | 容器高度，默认贴合父级(父级需要有高度)，也可自己设置，接受合法的 CSS 值，传数字会转换成 px              |\n| breadth      | Number        | 6           | 滑块的粗细，单位: px                                                                                    |\n| thumbColor   | String        | #7f7f7f     | 滑块的颜色，接受 CSS 颜色值                                                                             |\n| trackColor   | String        | transparent | 轨道的颜色，接受 CSS 颜色值                                                                             |\n| autoHide     | Boolean       | true        | 是否自动隐藏滚动条，鼠标在区域内才显示                                                                  |\n| left         | Boolean       | false       | 是否把垂直滚动条放在容器的左边                                                                          |\n| top          | Boolean       | false       | 是否把水平滚动条放在容器的顶端                                                                          |\n| noVer        | Boolean       | false       | 是否禁用垂直滚动条(overflow-y:hidden)                                                                   |\n| noHor        | Boolean       | false       | 是否禁用水平滚动条(overflow-x:hidden)                                                                   |\n| minLength    | Number        | 20          | 当内容无限多的时候，滑块最短不得低于此值，单位: px                                                      |\n| resizeObject | Boolean       | false       | 如果存在监听不到内容高度变化的情况可以把这个值改为 true 试试，（nuxt.js 打包后 firefox 发现有这种情况） |\n\n### 自定义事件\n\n\u003ctable\u003e\n\u003cthead\u003e\n  \u003ctr\u003e\n    \u003cth\u003e事件名\u003c/th\u003e\n    \u003cth\u003e描述\u003c/th\u003e\n    \u003cth\u003e返回值\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003cthead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eonVerStart\u003c/td\u003e\n      \u003ctd\u003e每次垂直滚动条抵达顶部时将触发一次\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cpre\u003e\n{\n  offsetHeight: 内容区的总高度,\n  offsetWidth: 内容区的总宽度,\n  height: 容器的高度,\n  width: 容器的宽度,\n  scrollTop: 内容区已被滚到上边去的距离,\n  scrollLeft: 内容区已被滚到左边去的距离\n}\n        \u003c/pre\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eonVerEnd\u003c/td\u003e\n      \u003ctd\u003e每次垂直滚动条抵达底部时将触发一次\u003c/td\u003e\n      \u003ctd\u003e同上\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eonHorStart\u003c/td\u003e\n      \u003ctd\u003e每次水平滚动条抵达最左边时将触发一次\u003c/td\u003e\n      \u003ctd\u003e同上\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eonHorEnd\u003c/td\u003e\n      \u003ctd\u003e每次水平滚动条抵达最右边时将触发一次\u003c/td\u003e\n      \u003ctd\u003e同上\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eonScroll\u003c/td\u003e\n      \u003ctd\u003e当滚动条的位置变化时就会触发一次，无论是垂直滚动条还是水平滚动条\u003c/td\u003e\n      \u003ctd\u003e同上\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n### 自身方法\n\n| 方法名        | 参数                                 | 描述                                                   |\n| ------------- | ------------------------------------ | ------------------------------------------------------ |\n| scrollTo      | (x:number,y:number,isSmooth:boolean) | 滚动到指定的位置,x 水平，y 垂直, isSmooth 是否平滑过度 |\n| getScrollInfo | 无                                   | 获取当前滚动条各种信息                                 |\n\n如何使用自身方法：\n\n```vue\n\u003ctemplate\u003e\n  \u003c!-- 需要定义一个ref --\u003e\n  \u003cOhyeah ref=\"oh1\"\u003e\n    ...\n  \u003c/Ohyeah\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  methods: {\n    scrollTo() {\n      // 水平保持原位，垂直滚到100px处，平滑过度\n      this.$refs.oh1.scrollTo(null, 100, true);\n    },\n    scrollToEnd() {\n      // 水平滚到最左边，垂直滚到底，瞬间完成\n      this.$refs.oh1.scrollTo(0, \"end\", false);\n    },\n    getScrollInfo() {\n      // 获取当前滚动条各种信息\n      const msg = this.$refs.oh1.getScrollInfo();\n      /**\n       * height: 内容区可见高度,不包括边框\n       * width: 内容区可见宽度,不包括边框\n       * clientHeight: 同height,\n       * clientWidth: 同width,\n       * offsetHeight: 内容区高度,包括边框\n       * offsetWidth: 内容区宽度，包括边框,\n       * scrollTop: 内容区已被滚到上边去的距离,\n       * scrollLeft: 内容区已被滚到左边去的距离,\n       * scrollHeight: 内容区真实总高度,包括看不见的区域\n       * scrollWidth: 内容区真实总宽度,包括看不见的区域\n       * */\n    },\n  },\n};\n\u003c/script\u003e\n```\n\n### 完整例子\n\n```vue\n\u003ctemplate\u003e\n  \u003c!-- 若不设置ohyeah的width和height, 则需要一个具有高度和宽度的容器来包裹ohyeah --\u003e\n  \u003cdiv style=\"height:100vh; width:50%;\"\u003e\n    \u003cOhyeah\u003e\n      \u003cp v-for=\"(item, index) in testData\" :key=\"index\"\u003e{{ index }}\u003c/p\u003e\n    \u003c/Ohyeah\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { Ohyeah } from \"vue-ohyeah-scroll\";\nexport default {\n  data(){\n    return {\n      testData: new Array(100).fill(\"\")\n    }\n  }\n  components:{\n    Ohyeah\n  }\n}\n\u003c/script\u003e\n```\n\n### 注意事项\n\n1.\n\n\u003e **scrollTo(x,y,isSmooth)** 方法\u003cbr/\u003e\n\u003e 平滑滚动使用的是`scroll-behavior: smooth;`,目前`chrome`,`firefox`,`opera`支持\u003cbr/\u003e \u003e **但是**：浏览器水平滚动条和垂直滚动条是互斥的，当水平正在滚时，垂直滚不动，反之亦然。浏览器始终只会有一个方向处于滚动中\u003cbr/\u003e \u003e **所以**：如果设置了`isSmooth`为`true`,那么不要同时设置 x 和 y,至少有一个应该为`null`\u003cbr/\u003e\n\n2.\n\n\u003e 如果你不设置 ohyeah 的 width 和 height 属性，或者设置为百分比，那么就需要一个具有高度和宽度的父级元素来包裹 ohyeah\n\n### 更新\n\n- 0.5.6 调整了安卓手机上原生滚动条的样式\n- 0.5.x 重构了,现在基于原生滚动条的默认行为\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavaluo%2Fvue-ohyeah-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavaluo%2Fvue-ohyeah-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavaluo%2Fvue-ohyeah-scroll/lists"}