Add section scroll component

This commit is contained in:
Konstantinos Triantafyllou 2022-01-13 18:14:09 +02:00
parent 83a9f259bf
commit 68b0b22754
3 changed files with 69 additions and 0 deletions

View File

@ -0,0 +1,10 @@
/* hide scrollbar but allow scrolling */
*[scroll] {
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
}
*[scroll]::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}

View File

@ -0,0 +1,49 @@
import {Component, HostListener, Input, OnInit, ViewEncapsulation} from "@angular/core";
/**
* <section-scroll [customClass]="'optional classes for grid e.g. uk-flex-bottom'">
* <div fixed>...</div>
* <div scroll>...</div> # use uk-flex-first to change order
* </section-scroll>
*
* */
@Component({
selector: 'section-scroll',
template: `
<div class="uk-grid" style="align-items: self-start" [ngClass]="customClass">
<ng-content select="[fixed]"></ng-content>
<ng-content select="[scroll]"></ng-content>
</div>
`,
styleUrls: ['section-scroll.component.css'],
encapsulation: ViewEncapsulation.None
})
export class SectionScrollComponent implements OnInit {
@Input()
public customClass = null;
private fixed: HTMLElement;
private scroll: HTMLElement;
constructor() {
}
@HostListener('window:resize', ['$event'])
onResize(event) {
this.fixed = document.querySelector('[fixed]');
this.scroll = document.querySelector('[scroll]');
this.scroll.setAttribute('style','max-height: ' + this.height + 'px;');
}
ngOnInit() {
this.fixed = document.querySelector('[fixed]');
this.scroll = document.querySelector('[scroll]');
this.scroll.setAttribute('style','max-height: ' + this.height + 'px;');
}
get height():number {
return this.fixed?this.fixed.offsetHeight:0;
}
}

View File

@ -0,0 +1,10 @@
import {NgModule} from "@angular/core";
import {SectionScrollComponent} from "./section-scroll.component";
import {CommonModule} from "@angular/common";
@NgModule({
imports: [CommonModule],
declarations: [SectionScrollComponent],
exports: [SectionScrollComponent]
})
export class SectionScrollModule {}