{"id":15024812,"url":"https://github.com/mercs600/vue2-perfect-scrollbar","last_synced_at":"2025-04-12T14:56:27.758Z","repository":{"id":33082314,"uuid":"149488707","full_name":"mercs600/vue2-perfect-scrollbar","owner":"mercs600","description":"Vue.js wrapper for perfect scrollbar ","archived":false,"fork":false,"pushed_at":"2024-03-30T20:23:06.000Z","size":1215,"stargazers_count":275,"open_issues_count":12,"forks_count":43,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-29T18:05:43.837Z","etag":null,"topics":["perfect-scrollbar","vue","vuejs","vuejs-components","vuejs2"],"latest_commit_sha":null,"homepage":"https://mercs600.github.io/vue2-perfect-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/mercs600.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-19T17:37:36.000Z","updated_at":"2024-09-04T07:28:57.000Z","dependencies_parsed_at":"2024-06-18T12:36:22.497Z","dependency_job_id":"c509ebdb-4d6a-48f0-bb90-36b124a816dd","html_url":"https://github.com/mercs600/vue2-perfect-scrollbar","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mercs600%2Fvue2-perfect-scrollbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mercs600%2Fvue2-perfect-scrollbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mercs600%2Fvue2-perfect-scrollbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mercs600%2Fvue2-perfect-scrollbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mercs600","download_url":"https://codeload.github.com/mercs600/vue2-perfect-scrollbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248586244,"owners_count":21128996,"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":["perfect-scrollbar","vue","vuejs","vuejs-components","vuejs2"],"created_at":"2024-09-24T20:01:00.371Z","updated_at":"2025-04-12T14:56:27.729Z","avatar_url":"https://github.com/mercs600.png","language":"JavaScript","funding_links":[],"categories":["Components \u0026 Libraries","UI Utilities [🔝](#readme)","UI Utilities"],"sub_categories":["UI Utilities","Scroll"],"readme":"# 🚧 Repository outdated \n\nThis project (vue2-perfect-scrollbar) is no longer actively developed or maintained. If you are seeking a version compatible with Vue 3, you can find it here: [https://github.com/mercs600/vue3-perfect-scrollbar](https://github.com/mercs600/vue3-perfect-scrollbar).\n\nFor any issues or bugs related to the core functionality of the Perfect Scrollbar library itself, please report them directly to the original author at https://perfectscrollbar.com/.\n\nWe appreciate your understanding and thank you for your support of this project.\n\n# vue2-perfect-scrollbar\nVue.js minimalistic but powerful wrapper for perfect scrollbar\n\nAre you looking compatible version with Vue3 ? check https://github.com/mercs600/vue3-perfect-scrollbar \n\n# Why I Created it ? \nBecause I ❤️ to use [perfect-scrollbar](https://github.com/utatti/perfect-scrollbar) in my projects (🙌 [utatti](https://github.com/utatti)). But also because the current solutions on github are outdated or overcomplicated.\n\n# Why would you use it ? \n\nBecause you want to load [perfect-scrollbar](https://github.com/utatti/perfect-scrollbar#) to your Vue project in an easy way. But also because this plugin is updated, tested and build by rollup. So you will not find any unnecessary 💩 code in this repo. I hope 🙏.\n\nIf you have any reasonable PR you are welcome 🤘\n\n# Install\n## npm\n\n```sh\nnpm install vue2-perfect-scrollbar\n```\n\n## yarn \n\n```sh\nyarn add vue2-perfect-scrollbar\n```\n\n# How to use \n\n## Global Registration\n\n```js\nimport PerfectScrollbar from 'vue2-perfect-scrollbar'\nimport 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css'\n\nVue.use(PerfectScrollbar)\n```\n\nSo then you can use this plugin in each component as\n\n```html\n\u003cperfect-scrollbar\u003e\n    \u003cp\u003e Lorem Ipsum is simply dummy text of the printing and typesetting industry. \u003c/p\u003e\n\u003c/perfect-scrollbar\u003e\n```\n\nThis plugin will generate a container with \".ps\" class name, you need to customize the height of the container\n\n```css\n/* example */\n.ps {\n  height: 400px;\n}\n```\n\n[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/wn7q7o9ww7)\n\n### Global options\n\nInstall method takes additional parameters:\n\n#### `name {String}`\nName of your global component.\n\n**Default**: `PerfectScrollbar`\n\n#### `tag {String}`\nTag which will be render as perfect scrollbar container\n\n**Default**: `div`\n\n#### `watchOptions {Boolean}`\nSet true if you want to update perfect-scrollbar on options change\n\n**Default**: `false`\n\n#### `options {Object}`: [Options](https://github.com/utatti/perfect-scrollbar#options)\nperfect-scrollbar options.\n\n**Default**: `{}`\n\n## Local Registration\n\n```html\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cperfect-scrollbar\u003e\n            \u003cp\u003e Lorem Ipsum is simply dummy text of the printing and typesetting industry. \u003c/p\u003e\n        \u003c/perfect-scrollbar\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport { PerfectScrollbar } from 'vue2-perfect-scrollbar'\nexport default {\n    components: {\n        PerfectScrollbar\n    }\n}\n\u003c/script\u003e\n\u003cstyle src=\"vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css\"/\u003e\n```\n\n[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/32o7m59xzm)\n\n# Props \n\n\n#### `tag {String}`\nTag which will be render as perfect scrollbar container\n\n**Default**: `div`\n\n#### `watchOptions {Boolean}`\nSet true if you want to update perfect-scrollbar on options change\n\n**Default**: `false`\n\n#### `options {Object}`: [Options](https://github.com/utatti/perfect-scrollbar#options)\nperfect-scrollbar options.\n\n# Events\n\nYou can use Vue.js way to listen on the all perfect-scrollbar events. List of events you can find [here](https://github.com/mdbootstrap/perfect-scrollbar#events)\n\nSimple example:\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cperfect-scrollbar @ps-scroll-y=\"onScroll\" ref=\"scrollbar\"\u003e\n      \u003cdiv\u003eyour content here\u003c/div\u003e\n    \u003c/perfect-scrollbar\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  methods: {\n    onScroll(event) {\n      console.log(this.$refs.scrollbar.ps, event);\n    }\n  }\n};\n\u003c/script\u003e\n```\n[![Edit Vue Perfect Scrollbar Event Listening](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-perfect-scrollbar-event-listening-e5eil?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n# DEMO\n\n[https://mercs600.github.io/vue2-perfect-scrollbar/](https://mercs600.github.io/vue2-perfect-scrollbar/). You can also fork example from [codesandbox](https://codesandbox.io/embed/32o7m59xzm)\n\n# Cookbook\n\n## Custom scrollbar behavior with router.\n\nOne of simple solution to setup custom scrollbar to top when your route is changed. \n\n1. Add perfect scrollbar as wrapper for router-view and add simple ref\n```html\n\u003cperfect-scrollbar ref=\"scroll\"\u003e\n  \u003crouter-view\u003e\u003c/router-view\u003e\n\u003c/perfect-scrollbar\u003e\n```\n\n2. Add watch on $route to setup scroll container to 0, when route is changed. \n\n```js\nwatch: {\n  $route() {\n    this.$refs.scroll.$el.scrollTop = 0;\n  }\n}\n```\n\n[![Edit vue2-perfect-scrollbar with router](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-routing-example-jbokc?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmercs600%2Fvue2-perfect-scrollbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmercs600%2Fvue2-perfect-scrollbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmercs600%2Fvue2-perfect-scrollbar/lists"}