{"id":13480885,"url":"https://github.com/zefoy/ngx-perfect-scrollbar","last_synced_at":"2026-01-16T23:41:26.655Z","repository":{"id":37734477,"uuid":"66731982","full_name":"zefoy/ngx-perfect-scrollbar","owner":"zefoy","description":"Angular wrapper library for the Perfect Scrollbar","archived":false,"fork":false,"pushed_at":"2023-07-07T07:11:30.000Z","size":7423,"stargazers_count":522,"open_issues_count":87,"forks_count":112,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-11-04T18:21:49.696Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/zefoy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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":"2016-08-27T19:32:32.000Z","updated_at":"2025-07-23T21:48:37.000Z","dependencies_parsed_at":"2024-06-18T22:58:44.053Z","dependency_job_id":"318a316f-7322-4c4b-bf82-0c2840bd3034","html_url":"https://github.com/zefoy/ngx-perfect-scrollbar","commit_stats":{"total_commits":364,"total_committers":19,"mean_commits":"19.157894736842106","dds":0.07692307692307687,"last_synced_commit":"d822327554a308dfa8e6569018157029a1c37b3a"},"previous_names":["zefoy/angular2-perfect-scrollbar"],"tags_count":81,"template":false,"template_full_name":null,"purl":"pkg:github/zefoy/ngx-perfect-scrollbar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zefoy%2Fngx-perfect-scrollbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zefoy%2Fngx-perfect-scrollbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zefoy%2Fngx-perfect-scrollbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zefoy%2Fngx-perfect-scrollbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zefoy","download_url":"https://codeload.github.com/zefoy/ngx-perfect-scrollbar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zefoy%2Fngx-perfect-scrollbar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28487894,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T22:54:02.790Z","status":"ssl_error","status_checked_at":"2026-01-16T22:50:10.344Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-07-31T17:00:46.231Z","updated_at":"2026-01-16T23:41:26.639Z","avatar_url":"https://github.com/zefoy.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"readme":"# Angular Perfect Scrollbar\n\n\u003ca href=\"https://badge.fury.io/js/ngx-perfect-scrollbar\"\u003e\u003cimg src=\"https://badge.fury.io/js/ngx-perfect-scrollbar.svg\" align=\"right\" alt=\"npm version\" height=\"18\"\u003e\u003c/a\u003e\n\nThis is an Angular wrapper library for the [Perfect Scrollbar](https://utatti.github.io/perfect-scrollbar/). To use this library you should get familiar with the Perfect Scrollbar documentation as well since this documentation only explains details specific to this wrapper.\n\nThis documentation is for the latest 5/6.x.x version which requires Angular 5 or newer. For Angular 4 you need to use the latest 4.x.x version. Documentation for the 4.x.x can be found from \u003ca href=\"https://github.com/zefoy/ngx-perfect-scrollbar/tree/4.x.x/\"\u003ehere\u003c/a\u003e.\n\n### EOL notice\n\nVersion 10.0.0 will be the last release of this library. I recommend you to switch to using native Angular scrollbar libraries such as ngx-scrollbar. There are also forks available (just search with perfect-scrollbar from npm registry) if you really want to use a wrapper library for perfect scrollbar. For the sake of good code and practices I would personally use a native Angular libraries since using Angular wrappers for DOM libraries will always have limitations and performance issues.\n\nEven though I should not need to tell about the motivation for EOL, but since some seem to think its required the main reason for EOL this library was that at the time perfect-scrollbar library itself was not maintained (do not know the current situation though) and none of the bugs it had were being addressed. That and the native Angular libraries coming to existence that do this better sealed the decision to end this library.\n\n### Quick links\n\n[Example application](https://zefoy.github.io/ngx-perfect-scrollbar/)\n |\n[StackBlitz example](https://stackblitz.com/github/zefoy/ngx-perfect-scrollbar/tree/master)\n |\n[Perfect Scrollbar documentation](https://github.com/utatti/perfect-scrollbar/)\n\n### Building the library\n\n```bash\nnpm install\nnpm run build\n```\n\n### Running the example\n\n```bash\nnpm install\nnpm run start\n```\n\n### Installing and usage\n\n```bash\nnpm install ngx-perfect-scrollbar --save\n```\n\n##### Load the module for your app (with global configuration):\n\nProviding the global configuration is optional and when used you should only provide the configuration in your root module.\n\n```javascript\nimport { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';\nimport { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';\nimport { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';\n\nconst DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {\n  suppressScrollX: true\n};\n\n@NgModule({\n  ...\n  imports: [\n    ...\n    PerfectScrollbarModule\n  ],\n  providers: [\n    {\n      provide: PERFECT_SCROLLBAR_CONFIG,\n      useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG\n    }\n  ]\n})\n```\n\n##### Use it in your HTML template (with custom configuration):\n\nThis library provides two ways to create a Perfect Scrollbar element, a component and a directive. Component tries to make the usage as simple as possible and the directive is meant for more custom / advanced use cases.\n\nThe scroll area always needs some fixed height to work. The default styles uses 100% as the height value so the parent needs to have fixed height or you need to set it via CSS styles. Otherwise the height keeps growing and you won't get the scrollbars.\n\n**COMPONENT USAGE**\n\nSimply replace the element that would ordinarily be passed to `PerfectScrollbar` with the perfect-scollbar component.\n\n```html\n\u003cperfect-scrollbar style=\"max-width: 600px; max-height: 400px;\" [config]=\"config\"\u003e\n  \u003cdiv\u003eScrollable content\u003c/div\u003e\n\u003c/perfect-scrollbar\u003e\n```\n\n```javascript\n[config]                // Custom config to override the global defaults.\n[disabled]              // Disables the Perfect Scrollbar initialization.\n\n[usePSClass]            // Use 'ps' class (needed by the ps theme styles).\n\n[autoPropagation]       // Automatic swipe and wheel propagation control.\n[scrollIndicators]      // Enable fading edges scroll indicators showing.\n\n(\u003cpsEventName\u003e)         // All Perfect Scrollbar events work as bindings.\n                        // Event names are in camel case (not kebab case).\n                        // Example: ps-y-reach-start -\u003e psYReachStart\n```\n\n**DIRECTIVE USAGE**\n\nWhen using only the directive you need to provide your own theming or import the default theme:\n\n```css\n@import '~perfect-scrollbar/css/perfect-scrollbar.css';\n```\n\nPerfect Scrollbar directive should be used with div elements and can take optional custom configuration:\n\n```html\n\u003cdiv class=\"ps\" style=\"position: relative; max-width: 600px; max-height: 400px;\" [perfectScrollbar]=\"config\"\u003e\n  \u003cdiv\u003eScrollable content\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```javascript\n[perfectScrollbar]      // Can be used to provide optional custom config.\n\n[disabled]              // Disables the Perfect Scrollbar initialization.\n\n(\u003cpsEventName\u003e)         // All Perfect Scrollbar events work as bindings.\n                        // Event namea are in camel case (not kebab case).\n                        // Example: ps-y-reach-start -\u003e psYReachStart\n```\n\n##### Available configuration options (custom / global configuration):\n\n```javascript\nhandlers                // List of event handlers to scroll the element.\nwheelSpeed              // Scroll speed for the mousewheel event (Default: 1).\nswipeEasing             // Use easing for the swipe scrolling (Default: true).\nsuppressScrollX         // Disable X axis in all situations (Default: false).\nsuppressScrollY         // Disable Y axis in all situations (Default: false).\nwheelPropagation        // Propagate wheel events at the end (Default: false).\nuseBothWheelAxes        // Always use both of the wheel axes (Default: false).\nminScrollbarLength      // Minimum size (px) for the scrollbar (Default: null).\nmaxScrollbarLength      // Maximum size (px) for the scrollbar (Default: null).\nscrollXMarginOffset     // Offset before enabling the X scroller (Default: 0).\nscrollYMarginOffset     // Offset before enabling the Y scroller (Default: 0).\n```\n\nFor more detailed documentation with all the supported events / options see the the Perfect Scrollbar documentation.\n\n##### Available control / helper functions (provided by the directive):\n\n```javascript\nps()                                        // Returns reference to the PS instance.\n\nupdate()                                    // Updates the scrollbar size and position.\n\ngeometry(prefix)                            // Returns the geometry with specified prefix.\nposition(absolute)                          // Returns the reach or absolute scroll position.\n\nscrollable(direction)                       // Checks if the given direction is scrollable.\n                                            // Direction can be: 'any', 'both', 'x', 'y'\n\nscrollTo(x, y, speed?)                      // Animate scroll to given x,y coordinates.\nscrollToY(position, speed?)                 // Animate scroll to given vertical position.\nscrollToX(position, speed?)                 // Animate scroll to given horizontal position.\nscrollToTop(offset?, speed?)                // Animate scroll to given offset from the top.\nscrollToLeft(offset?, speed?)               // Animate scroll to given offset from the left.\nscrollToRight(offset?, speed?)              // Animate scroll to given offset from the right.\nscrollToBottom(offset?, speed?)             // Animate scroll to given offset from the bottom.\nscrollToElement(element, offset?, speed?)   // Animate scroll to given or matching HTML element.\n                                            // Input can be HTMLElement or a query selector string.\n```\n\nAbove functions can be accessed through the directive reference (available as directiveRef in the component). Position and offset needs to be given in pixels and speed in milliseconds.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzefoy%2Fngx-perfect-scrollbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzefoy%2Fngx-perfect-scrollbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzefoy%2Fngx-perfect-scrollbar/lists"}