{"id":15601790,"url":"https://github.com/codebender828/vue-simple-scrollbar","last_synced_at":"2025-04-08T14:17:09.140Z","repository":{"id":35064593,"uuid":"202479182","full_name":"codebender828/vue-simple-scrollbar","owner":"codebender828","description":"🦉 A simple friendly lightweight Vue.js scrollbar to make take your scrollbar game to the next level. ","archived":false,"fork":false,"pushed_at":"2022-12-11T02:02:40.000Z","size":4272,"stargazers_count":13,"open_issues_count":23,"forks_count":1,"subscribers_count":0,"default_branch":"dev","last_synced_at":"2025-03-16T00:35:39.246Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Vue","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/codebender828.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-15T05:25:35.000Z","updated_at":"2023-03-29T13:39:00.000Z","dependencies_parsed_at":"2023-01-15T13:15:44.165Z","dependency_job_id":null,"html_url":"https://github.com/codebender828/vue-simple-scrollbar","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fvue-simple-scrollbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fvue-simple-scrollbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fvue-simple-scrollbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fvue-simple-scrollbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codebender828","download_url":"https://codeload.github.com/codebender828/vue-simple-scrollbar/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247856545,"owners_count":21007621,"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":[],"created_at":"2024-10-03T02:25:16.992Z","updated_at":"2025-04-08T14:17:09.120Z","avatar_url":"https://github.com/codebender828.png","language":"Vue","funding_links":["https://www.buymeacoffee.com/dIlWof6x5"],"categories":[],"sub_categories":[],"readme":"[![Codecov Coverage](https://img.shields.io/codecov/c/github/codebender828/vue-simple-scrollbar/master.svg?style=flat-square)](https://codecov.io/gh/codebender828/vue-simple-scrollbar) [![CircleCI](https://circleci.com/gh/codebender828/vue-simple-scrollbar.svg?style=svg)](https://circleci.com/gh/codebender828/vue-simple-scrollbar) [![Netlify Status](https://api.netlify.com/api/v1/badges/cf493ebe-9a4a-45df-94ed-162de0ee999b/deploy-status)](https://app.netlify.com/sites/vigorous-hypatia-ceea9b/deploys)\n\n# 🦉 vue-simple-scrollbar\nA simple friendly lightweight scrollbar to make take your scrollbar game to the next level. This awesome package was ported from the awesome [simple-scrollbar](https://github.com/buzinas/simple-scrollbar)\n\n## How it works?\nVue simple scrollbar creates an elegant, customizable lightweight javascript scrollbar for content that overflows the `vue-simple-scrollbar`'s parent element. Out of the box, `vue-simple-scrollbar` gives you:\n- Super fast and lightweight (2.1KB after gzip and minify)\n- It uses the native scroll events(mouse wheel, space, page down, page up, arrows)\n- No dependencies, completely vanilla Javascript!\n\n## ⚡️ Demo\nVery ugly demo here: [Demo](https://vue-simple-scrollbar.netlify.com/)\nDon't worry! Will make it more elegant later!\n\n## 📦 Installation\n\nWith Yarn:\n```\nyarn add vue-simple-scrollbar\n```\n\nOr if you're an NPM hipster:\n```\nnpm install vue-simple-scrollbar --save\n```\n\n## 🖌 Usage\n### 📌 Local Component Registation\nYou can import the `vue-simple-scrollbar` in your single file component as shown below. Remember to import the `vue-simple-scrollbar` in your style tag as well.\n\nIn your template file\n```html\n\u003ctemplate\u003e\n  \u003cdiv class=\"box\"\u003e\n    \u003cvue-simple-scrollbar\u003e\n      {{ longString }}\n    \u003c/vue-simple-scrollbar\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"js\"\u003e\nimport VueSimpleScrollbar from 'vue-simple-scrollbar'\n\nexport default {\n  name: 'MyComponent',\n  components: {\n    VueSimpleScrollbar\n  },\n  data() {\n    return {\n      longString: 'Lorem Ipsum ...'\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\n@import '~vue-simple-scrollbar/dist/vue-simple-scrollbar.css';\n\n.box {\n  width: 200px;\n  height: 200px;\n}\n\u003c/style\u003e\n\n```\n### 🌍 Global Component Registation\nIn your `main.js`:\n```js\nimport Vue from 'vue'\nimport App from './App.vue'\nimport VueSimpleScript from 'vue-simple-scrollbar'\nimport 'vue-simple-scrollbar/dist/vue-simple-scrollbar.css'\n\nVue.component('VueSimpleScrollBar', VueSimpleScrollbar)\n\nnew Vue({\n  render: h =\u003e h(App)\n}).$mount('#app')\n```\nThen use the `vue-simple-scrollbar` component directly in your components.\n\n### 📬 With CDN\nIn your good old trusty HTML:\n```html\n\u003cmeta charset=\"utf-8\"\u003e\n\u003ctitle\u003eMy Page\u003c/title\u003e\n\u003cscript src=\"https://unpkg.com/vue\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/vue-simple-scrollbar@latest/dist/vue-simple-scrollbar.umd.min.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/vue-simple-scrollbar@latest/dist/vue-simple-scrollbar.css\"\u003e\n\n\n\u003cdiv id=\"app\"\u003e\n  \u003cdemo\u003e\u003c/demo\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\nnew Vue({\n  components: {\n    VueSimpleScrollbar\n  }\n}).$mount('#app')\n\u003c/script\u003e\n```\n\n## Props:\n|Name|Description|Type|Required|Default|Values|\n|---|---|---|---|---|---|\n|`scrollbarColor`|Background color scrollbar|`String` |`false`|`rgba(0, 0, 0, 0.1);`||\n|`autoScroll`|Watches for changes in DOM content via the Mutation Observer API and automatically scrolls to `autoscrollDirection`|`String` |`false`|`false`|\n|`autoScrollDirection`|Direction of auto scroll behavior|`String` |`false`|`bottom`|`bottom`, `top`|\n|`scrollBehavior`|Behaviour of scroll animation|`String` |`false`|`rgba(0, 0, 0, 0.1);`|`smooth`|\n\n### Programmatically Scrolling `vue-simple-scrollbar`\n`vue-simple-scrollbar` can also be programmatically scrolled for content that is dynamic in nature. This can be done by directly calling the scroll methods on the `vue-simple-scrollbar` component.\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cvue-simple-scrollbar ref=\"scrollbarWrapper\"\u003e\n      ... content ...\n    \u003c/vue-simple-scrollbar\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"js\"\u003e\nimport VueSimpleScrollbar from 'vue-simple-scrollbar'\n\nexport default {\n  name: 'ParentComponent',\n  components: {\n    VueSimpleScrollbar\n  },\n  mounted() {\n    // Programmatically scroll content to bottom\n    this.$refs.scrollbarWrapper.scrollToBottom()\n\n    // Programmatically scroll content to top\n    this.$refs.scrollbarWrapper.scrollToTop()\n  }\n}\n\u003c/script\u003e\n```\n\n### 🥦 TODO:\n- [x]  Dynamic styles/colors\n  - [x]  Github issue template\n  - [x]  Pull request template\n- [x]  Custom styling via props.\n- [x]  Auto Scroll control and behaviour\n- [ ]  Smart padding of inner wrapper markup.\n  - [ ]  Dynamic smart padding via props\n- [ ]  Documentation Site\n- [ ]  Server side rendering support with Vue SSR and Nuxt.js\n- [ ]  Make demo site more elegant.\n  - [ ]  Use Saber for docs\n  - [ ]  Make CodeSandbox demos\n  - [ ]  Write articles\n- [ ]  Design Logo\n\n### Contributing:\nPlease read the [Contribution Guide](./.github/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.\n\n### License: MIT\nPlease read the [license](./LICENSE) documentation for more information\n\n### Contributors\nWaiting for you ❤️. Feel free to take a stab at one of the upcoming tasks or open issues.\n\n### 🍇 Author \nMade with love by Jonathan Bakebwa.\n👣 Github: [@codebender828](https://github.com/codebender828)\n🦅 Twitter: [@codebender828](https://twitter.com/codebender828)\n\n### ☕️ Support\nDo you like my work? [Buy me a coffee!](https://www.buymeacoffee.com/dIlWof6x5)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebender828%2Fvue-simple-scrollbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodebender828%2Fvue-simple-scrollbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebender828%2Fvue-simple-scrollbar/lists"}