{"id":16184115,"url":"https://github.com/lx544690189/vue-gemini-scrollbar","last_synced_at":"2025-03-16T10:31:53.621Z","repository":{"id":57396051,"uuid":"118619663","full_name":"lx544690189/vue-gemini-scrollbar","owner":"lx544690189","description":"Custom overlay-scrollbars with native scrolling mechanism for web applications基于原生滚动机制的自定义滚动条","archived":false,"fork":false,"pushed_at":"2020-07-09T12:40:20.000Z","size":860,"stargazers_count":109,"open_issues_count":4,"forks_count":15,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-27T07:46:55.750Z","etag":null,"topics":["gemini-scrollbar","scroll","scrollbar","vue"],"latest_commit_sha":null,"homepage":"https://github.com/lx544690189/vue-gemini-scrollbar","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lx544690189.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":"2018-01-23T14:14:52.000Z","updated_at":"2024-09-11T10:57:57.000Z","dependencies_parsed_at":"2022-09-18T11:01:19.645Z","dependency_job_id":null,"html_url":"https://github.com/lx544690189/vue-gemini-scrollbar","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/lx544690189%2Fvue-gemini-scrollbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lx544690189%2Fvue-gemini-scrollbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lx544690189%2Fvue-gemini-scrollbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lx544690189%2Fvue-gemini-scrollbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lx544690189","download_url":"https://codeload.github.com/lx544690189/vue-gemini-scrollbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243814898,"owners_count":20352037,"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":["gemini-scrollbar","scroll","scrollbar","vue"],"created_at":"2024-10-10T07:09:02.091Z","updated_at":"2025-03-16T10:31:52.730Z","avatar_url":"https://github.com/lx544690189.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-gemini-scrollbar\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/lx544690189/vue-gemini-scrollbar)\n[![Travis](https://img.shields.io/travis/rust-lang/rust.svg)](https://lx544690189.github.io/vue-gemini-scrollbar/)\n![Vue 2.x](https://img.shields.io/badge/vue-2.x-green.svg \"Vue 2 Compatible\")\n\n[![NPM](https://nodei.co/npm/vue-gemini-scrollbar.png?downloads=true\u0026downloadRank=true)](https://www.npmjs.com/package/vue-gemini-scrollbar)\n\n[查看demo](https://lx544690189.github.io/vue-gemini-scrollbar/)\n\n\u003cimg src=\"https://raw.githubusercontent.com/lx544690189/vue-gemini-scrollbar/master/screenshot/screenshot.png\" width=\"400\"/\u003e\n\n## 介绍\n无需配置横向或纵向滚动，自定义滚动条完全按照原生的方式去显示（也就是如果区域存在纵向滚动条，使用它后将替换纵向滚动条）。正因为如此，请不要使用::-webkit-scrollbar来修饰原生滚动条，这样会影响对滚动条宽度的检测。\n- 基于[gemini-scrollbar](https://github.com/noeldelgado/gemini-scrollbar)封装的vue组件\n- 基于原生滚动的自定义滚动条\n- 支持IE9+\n\n\n## 安装\n\n```sh\nnpm i vue-gemini-scrollbar --save\n```\n\n如需script方式引入，请自行编译，build后在disk文件夹（vue-gemini-scrollbar.js）\n\n```sh\nnpm run build\n```\n\n## Attributes\n\n参数 | 类型 | 默认值 | 说明\n---|---|---|---\nautoCreate | Boolean | true | 自动创建自定义滚动条 \nautoshow | Boolean | false | hover时才显示滚动条\nforceGemini | Boolean | false | 原生滚动条可见的情况下，强制显示自定义滚动条（开发时会比较有用）\nminThumbSize | Number | 20 | 滚动条最小长度\n\n**注意：**\ncreateElements参数在这里被强制置为false，不可配置，因为启用它可能会影响Vue的virtual DOM。\n\n## Events\n\n事件名称 | 回调参数 | 说明\n---|---|---\nready | geminiScrollbar实例 | GeminiScrollbar实例创建\nresize | - | 滚动区域大小调整时触发\n\n## Methods\n\n\n方法名称 | 说明\n---|---\ncreate | 创建滚动区域\nupdate | 重新计算滚动区域大小（vue可以监听并触发组件updated的时候，都不需要你手动去调用它；但是像图片资源的load导致高度变化，你需要在合适的时候去手动调用；）\ndestroy | 移除绑定事件及滚动条元素\n\n**如何调用：**\n监听ready事件，通过回调函数的参数geminiScrollbar实例来调用这些方法\n\n## 使用\n\n安装组件\n\n```javascript\nimport Vue from 'vue'\nimport GeminiScrollbar from 'vue-gemini-scrollbar'\n\nVue.use(GeminiScrollbar)\n```\n\n在模板中使用\n\n```vue\n\u003cGeminiScrollbar\n    class=\"my-scroll-bar\"\u003e\n    content...\n\u003c/GeminiScrollbar\u003e\n```\n\n注意：只有内容溢出才会有滚动效果\n\n```css\n.my-scroll-bar{\n    height:200px;\n}\n```\n\n添加自己的滚动条样式\n```css\n/* override gemini-scrollbar default styles */\n\n/* vertical scrollbar track */\n.gm-scrollbar.-vertical {\n  background-color: #f0f0f0\n}\n\n/* horizontal scrollbar track */\n.gm-scrollbar.-horizontal {\n  background-color: transparent;\n}\n\n/* scrollbar thumb */\n.gm-scrollbar .thumb {\n  background-color: rebeccapurple;\n}\n.gm-scrollbar .thumb:hover {\n  background-color: fuchsia;\n}\n```\n\n## 如何为body设置自定义滚动条\n\n因为vue组件的根元素不能为body，此时可以从Vue.$geminiScrollbar访问到GeminiScrollbar对象，然后你就可以自由使用它了（文档请参考：[gemini-scrollbar](https://github.com/noeldelgado/gemini-scrollbar)）。\n\n```css\nhtml {\n    height: 100%;\n    /* or */\n    height: 100vh;\n}\n```\n\n```javascript\nvar scrollbar = new Vue.$geminiScrollbar({\n    element: document.body\n}).create();\n```\n\n## 其他实现\n- [gemini-scrollbar](https://github.com/noeldelgado/gemini-scrollbar)（原生js）\n- [react-gemini-scrollbar](https://github.com/noeldelgado/react-gemini-scrollbar)（react）","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flx544690189%2Fvue-gemini-scrollbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flx544690189%2Fvue-gemini-scrollbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flx544690189%2Fvue-gemini-scrollbar/lists"}