angular-infinity-scroller
Version:
>[!TIP] >Note: Current version of package is compatible with angular version above 17
54 lines (49 loc) • 2.4 kB
JavaScript
import * as i0 from '@angular/core';
import { input, output, inject, ElementRef, Directive } from '@angular/core';
class AngularInfinityScrollerDirective {
constructor() { }
scrollDistance = input();
onScrolled = output();
el = inject(ElementRef);
prevScrollHeight = 0;
ngAfterViewInit() {
this.el.nativeElement.addEventListener('scroll', this.onScroll.bind(this));
}
ngOnDestroy() {
this.el.nativeElement.removeEventListener('scroll', this.onScroll.bind(this));
}
isEmit = true;
onScroll() {
const height = Math.floor(this.el?.nativeElement.scrollHeight - this.el.nativeElement.clientHeight);
const scrollValue = Math.floor(this.el?.nativeElement.scrollTop);
const emitTriggerHeight = Math.ceil((1 - ((this.scrollDistance() ?? 2) / 10)) * height);
if (scrollValue >= (emitTriggerHeight) && !this.isEmit) {
return;
}
else if (scrollValue < (emitTriggerHeight)) {
this.isEmit = true;
}
if (scrollValue >= (emitTriggerHeight) && this.prevScrollHeight !== height) {
this.onScrolled.emit();
this.prevScrollHeight = height;
this.isEmit = false;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AngularInfinityScrollerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.1", type: AngularInfinityScrollerDirective, isStandalone: true, selector: "[angularInfinityScroller]", inputs: { scrollDistance: { classPropertyName: "scrollDistance", publicName: "scrollDistance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScrolled: "onScrolled" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AngularInfinityScrollerDirective, decorators: [{
type: Directive,
args: [{
selector: '[angularInfinityScroller]',
standalone: true
}]
}], ctorParameters: () => [] });
/*
* Public API Surface of angular-infinity-scroller
*/
/**
* Generated bundle index. Do not edit.
*/
export { AngularInfinityScrollerDirective };
//# sourceMappingURL=angular-infinity-scroller.mjs.map