From 1c8592121e67f4b1e40dc2b7de30548190ae48cb Mon Sep 17 00:00:00 2001 From: ardentia Date: Wed, 13 Sep 2023 15:58:30 +0300 Subject: [PATCH 1/2] fix detection calcuations --- projects/ng-sq-common/package.json | 2 +- .../lib/directives/scrolled-to-bottom-listener.directive.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/projects/ng-sq-common/package.json b/projects/ng-sq-common/package.json index 74e79ff74..cf9b5c831 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.2", "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 336c0ce4a..9ecf81146 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 @@ -17,7 +17,8 @@ export class ScrolledToBottomListenerDirective implements OnDestroy { } 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) <= element.clientHeight) : false; if (hasScrolledToBottom) { this.scrolledToBottom.emit(); From d189bfedb7ad392bee44a3a7e65e8889f0954eac Mon Sep 17 00:00:00 2001 From: ardentia Date: Thu, 25 Jan 2024 14:59:46 +0200 Subject: [PATCH 2/2] improve scrolled to bottom --- projects/ng-sq-common/package.json | 2 +- .../scrolled-to-bottom-listener.directive.ts | 13 ++++++++----- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/projects/ng-sq-common/package.json b/projects/ng-sq-common/package.json index cf9b5c831..852e4661a 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.2", + "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 9ecf81146..fe4fa1e5a 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,18 +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 ? - (Math.ceil(element.scrollHeight - element.scrollTop) <= element.clientHeight) : false; + (Math.ceil(element.scrollHeight - element.scrollTop) <= Math.ceil(element.clientHeight + 3)) : false; if (hasScrolledToBottom) { this.scrolledToBottom.emit(); + this.cd.detectChanges(); } }