diff --git a/projects/ng-sq-common/package.json b/projects/ng-sq-common/package.json index 74e79ff7..852e4661 100644 --- a/projects/ng-sq-common/package.json +++ b/projects/ng-sq-common/package.json @@ -1,6 +1,6 @@ { "name": "@sq-ui/ng-sq-common", - "version": "2.0.1", + "version": "2.0.3", "license": "MIT", "private": false, "description": "The core module for SQ-UI kit for Angular", diff --git a/projects/ng-sq-common/src/lib/directives/scrolled-to-bottom-listener.directive.ts b/projects/ng-sq-common/src/lib/directives/scrolled-to-bottom-listener.directive.ts index 336c0ce4..fe4fa1e5 100644 --- a/projects/ng-sq-common/src/lib/directives/scrolled-to-bottom-listener.directive.ts +++ b/projects/ng-sq-common/src/lib/directives/scrolled-to-bottom-listener.directive.ts @@ -1,5 +1,5 @@ import { - Directive, ElementRef, EventEmitter, Output, Renderer2, OnDestroy + Directive, ElementRef, EventEmitter, Output, Renderer2, OnDestroy, NgZone, ChangeDetectorRef } from '@angular/core'; @Directive({ @@ -10,17 +10,21 @@ export class ScrolledToBottomListenerDirective implements OnDestroy { private listener; - constructor(private elementRef: ElementRef, private renderer: Renderer2) { - this.listener = this.renderer.listen(this.elementRef.nativeElement, 'scroll', () => { - this.checkIfHasScrolledToBottom(this.elementRef.nativeElement); + constructor(private elementRef: ElementRef, private renderer: Renderer2, private ngZone: NgZone, private cd: ChangeDetectorRef) { + this.ngZone.runOutsideAngular(() => { + this.listener = this.renderer.listen(this.elementRef.nativeElement, 'scroll', () => { + this.checkIfHasScrolledToBottom(this.elementRef.nativeElement); + }); }); } checkIfHasScrolledToBottom(element: HTMLElement) { - const hasScrolledToBottom = element.scrollTop > 0 ? ((element.scrollHeight - element.scrollTop) === element.clientHeight) : false; + const hasScrolledToBottom = element.scrollTop > 0 ? + (Math.ceil(element.scrollHeight - element.scrollTop) <= Math.ceil(element.clientHeight + 3)) : false; if (hasScrolledToBottom) { this.scrolledToBottom.emit(); + this.cd.detectChanges(); } }