{"id":21206275,"url":"https://github.com/sara-pixie/elevator-scrollbar-directive","last_synced_at":"2025-03-14T23:11:58.909Z","repository":{"id":198672259,"uuid":"701277280","full_name":"Sara-pixie/elevator-scrollbar-directive","owner":"Sara-pixie","description":"elevator scrollbar scrolls in oposite direction \u0026 thumb is always the same size; also watches fixed header to compensate top offset","archived":false,"fork":false,"pushed_at":"2023-10-06T10:51:04.000Z","size":247,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-21T15:32:27.865Z","etag":null,"topics":["angular","elevator-scrollbar","fixed-header","reverse-scroll-scrollbar","scrollbar-thumb-allways-same-height","structural-directive"],"latest_commit_sha":null,"homepage":"https://comforting-sunburst-32a1d6.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sara-pixie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-10-06T09:56:33.000Z","updated_at":"2023-11-07T15:30:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"7527e83a-1e35-48be-966c-07d0ffd17fbc","html_url":"https://github.com/Sara-pixie/elevator-scrollbar-directive","commit_stats":null,"previous_names":["sara-pixie/elevator-scrollbar-directive"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sara-pixie%2Felevator-scrollbar-directive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sara-pixie%2Felevator-scrollbar-directive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sara-pixie%2Felevator-scrollbar-directive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sara-pixie%2Felevator-scrollbar-directive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sara-pixie","download_url":"https://codeload.github.com/Sara-pixie/elevator-scrollbar-directive/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243658274,"owners_count":20326467,"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":["angular","elevator-scrollbar","fixed-header","reverse-scroll-scrollbar","scrollbar-thumb-allways-same-height","structural-directive"],"created_at":"2024-11-20T20:55:04.797Z","updated_at":"2025-03-14T23:11:58.890Z","avatar_url":"https://github.com/Sara-pixie.png","language":"TypeScript","readme":"# ElevatorScrollbarDirective\n\n![image](https://github.com/Sara-pixie/elevator-scrollbar-directive/assets/78561671/9c408f3d-a443-4176-9fbe-7f0b58079010)\n\n## Directive\nDirective code [here](https://github.com/Sara-pixie/elevator-scrollbar-directive/blob/master/src/app/directives/elevator-scrollbar.directive.ts) also code for [wrapper component](https://github.com/Sara-pixie/elevator-scrollbar-directive/blob/master/src/app/directives/elevator-scrollbar-wrapper-container.component.ts) for the directive\n#### Summary\n- Elevator scrollbar scrolls in the opposite direction than normal scrollbars\n- thumb size is always the same (not based on content height)\n- content isn't hidden and there is no overflow: auto/scroll on wrapper component\n- scrollbar is superimposed over the right side of the HTML element\n- can be clicked through to a covered element (pointer-events: none) except the scrollbar thumb (pointer-events: all)\n- scrollbar is hidden on mobile view (media screen max 500px width)\n#### How To Use\non chosen HTML element add `*elevatorScrollbar` or `*elevatorScrollbarWatchHeader=\"boolean\"`\n\u003cbr\u003e(if boolean is true =\u003e will create top offset based on header height)\n\u003cbr\u003eThe directive will wrap the HTML element and add the elevator scrollbar (hidden for mobile media screen max 500px width)\n\u003cbr\u003e\u003cbr\u003e\u003cb\u003e*param*\u003c/b\u003e `hideIfSmallContent` will hide scrollbar if content height is smaller than window height\n\u003cbr\u003e\u003cbr\u003e![WARNING](https://placehold.it/50x15/FF0000/FFF?text=WARNING) only one per view/page (or change IDs to ViewChild in [ElevatorScrollbarWrapperComponent](https://github.com/Sara-pixie/elevator-scrollbar-directive/blob/master/src/app/directives/elevator-scrollbar-wrapper-container.component.ts))\n#### Examples\n- basic\n```\n\u003cdiv *elevatorScrollbar\u003e\n  \u003crouter-outlet\u003e\u003c/router-outlet\u003e\n\u003c/div\u003e\n```\n- watch header height\n```\n\u003cdiv *elevatorScrollbarWatchHeader=\"true\"\u003e\n  \u003crouter-outlet\u003e\u003c/router-outlet\u003e\n\u003c/div\u003e\n```\n- watch header height AND hideIfSmallContent (multiple inputs)\n```\n\u003cdiv *elevatorScrollbarWatchHeader=\"true;hideIfSmallContent:true\"\u003e\n \u003crouter-outlet\u003e\u003c/router-outlet\u003e\n\u003c/div\u003e\n```\n- basic AND hideIfSmallContent (NEED multiple inputs, so add first boolean - true/false doesn't matter)\n```\n\u003cdiv *elevatorScrollbar=\"false;hideIfSmallContent:true\"\u003e\n \u003crouter-outlet\u003e\u003c/router-outlet\u003e\n\u003c/div\u003e\n```\n## Fixed Header\nCode for fixed header [here](https://github.com/Sara-pixie/elevator-scrollbar-directive/blob/master/src/app/components/header/header.component.ts) also [header service](https://github.com/Sara-pixie/elevator-scrollbar-directive/blob/master/src/app/services/header.service.ts)\n#### How To Use\n```\n@Component({\n  selector: 'app-base',\n  template: `\n  \u003capp-header [headerItems]=\"headerItems\"\u003e\u003c/app-header\u003e\n  \u003cdiv id=\"base-body\" style=\"overflow-x: hidden\"\u003e\n    \u003crouter-outlet\u003e\u003c/router-outlet\u003e\n  \u003c/div\u003e\n  \u003capp-footer\u003e\u003c/app-footer\u003e\n  `,\n})\nexport class BaseComponent implements OnInit, AfterViewInit {\n  headerItems: PageHeaderItems = this.headerService.getDefaultLinks();\n\n  constructor(public headerService: HeaderService) {}\n\n  ngOnInit(): void {\n    this.headerItems = this.headerService.getBasePageLinks();\n  }\n\n  ngAfterViewInit(): void {\n    setTimeout(() =\u003e {\n      this.headerService.init('base-body');\n      /* will initiate hader service and lsten for header height changes to then add padding-top to 'base-body' so that header doesn't cover the top of 'base-body' contents */\n    }, 10);\n  }\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsara-pixie%2Felevator-scrollbar-directive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsara-pixie%2Felevator-scrollbar-directive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsara-pixie%2Felevator-scrollbar-directive/lists"}