https://github.com/sara-pixie/elevator-scrollbar-directive
elevator scrollbar scrolls in oposite direction & thumb is always the same size; also watches fixed header to compensate top offset
https://github.com/sara-pixie/elevator-scrollbar-directive
angular elevator-scrollbar fixed-header reverse-scroll-scrollbar scrollbar-thumb-allways-same-height structural-directive
Last synced: 4 months ago
JSON representation
elevator scrollbar scrolls in oposite direction & thumb is always the same size; also watches fixed header to compensate top offset
- Host: GitHub
- URL: https://github.com/sara-pixie/elevator-scrollbar-directive
- Owner: Sara-pixie
- Created: 2023-10-06T09:56:33.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-10-06T10:51:04.000Z (almost 2 years ago)
- Last Synced: 2025-01-21T15:32:27.865Z (6 months ago)
- Topics: angular, elevator-scrollbar, fixed-header, reverse-scroll-scrollbar, scrollbar-thumb-allways-same-height, structural-directive
- Language: TypeScript
- Homepage: https://comforting-sunburst-32a1d6.netlify.app
- Size: 241 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ElevatorScrollbarDirective
## Directive
Directive 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
#### Summary
- Elevator scrollbar scrolls in the opposite direction than normal scrollbars
- thumb size is always the same (not based on content height)
- content isn't hidden and there is no overflow: auto/scroll on wrapper component
- scrollbar is superimposed over the right side of the HTML element
- can be clicked through to a covered element (pointer-events: none) except the scrollbar thumb (pointer-events: all)
- scrollbar is hidden on mobile view (media screen max 500px width)
#### How To Use
on chosen HTML element add `*elevatorScrollbar` or `*elevatorScrollbarWatchHeader="boolean"`
(if boolean is true => will create top offset based on header height)
The directive will wrap the HTML element and add the elevator scrollbar (hidden for mobile media screen max 500px width)
*param* `hideIfSmallContent` will hide scrollbar if content height is smaller than window height
 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))
#### Examples
- basic
```
```
- watch header height
```
```
- watch header height AND hideIfSmallContent (multiple inputs)
```
```
- basic AND hideIfSmallContent (NEED multiple inputs, so add first boolean - true/false doesn't matter)
```
```
## Fixed Header
Code 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)
#### How To Use
```
@Component({
selector: 'app-base',
template: `
`,
})
export class BaseComponent implements OnInit, AfterViewInit {
headerItems: PageHeaderItems = this.headerService.getDefaultLinks();
constructor(public headerService: HeaderService) {}
ngOnInit(): void {
this.headerItems = this.headerService.getBasePageLinks();
}
ngAfterViewInit(): void {
setTimeout(() => {
this.headerService.init('base-body');
/* 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 */
}, 10);
}
}
```