36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
import { ChangeDetectorRef, Directive, ElementRef, HostBinding, HostListener, OnChanges, OnInit } from '@angular/core';
|
|
|
|
@Directive({
|
|
selector: '[iqserHasScrollbar]',
|
|
exportAs: 'iqserHasScrollbar',
|
|
})
|
|
export class HasScrollbarDirective implements OnInit, OnChanges {
|
|
@HostBinding('class') class = '';
|
|
|
|
constructor(protected readonly _elementRef: ElementRef, protected readonly _changeDetector: ChangeDetectorRef) {}
|
|
|
|
get hasScrollbar(): boolean {
|
|
const element = this._elementRef?.nativeElement as HTMLElement;
|
|
return element.clientHeight < element.scrollHeight;
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
setTimeout(() => {
|
|
this.process();
|
|
}, 0);
|
|
}
|
|
|
|
@HostListener('window:resize')
|
|
process(): void {
|
|
const newClass = this.hasScrollbar ? 'has-scrollbar' : '';
|
|
if (this.class !== newClass) {
|
|
this.class = newClass;
|
|
this._changeDetector.markForCheck();
|
|
}
|
|
}
|
|
|
|
ngOnChanges(): void {
|
|
this.process();
|
|
}
|
|
}
|