feat: add treshold on infinity scroll and hide content on collapse cl…

…osed
squidit · Oct 11, 2024 · d93d103 · d93d103
1 parent 873eac4
commit d93d103
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/components/sq-accordion/sq-collapse/sq-collapse.component.html b/src/components/sq-accordion/sq-collapse/sq-collapse.component.html
@@ -57,8 +57,10 @@
     }"
     #content
   >
+  @if(open) {
     <div #wrapper>
       <ng-content></ng-content>
     </div>
+  }
   </div>
 </div>
diff --git a/src/components/sq-infinity-scroll/sq-infinity-scroll.component.ts b/src/components/sq-infinity-scroll/sq-infinity-scroll.component.ts
@@ -70,6 +70,11 @@ export class SqInfinityComponent implements AfterViewInit, AfterContentChecked,
    */
   document: Document
 
+  /**
+   * Threshold for scrolling.
+   */
+  tresholdScroll = 25
+
   /**
    * Creates an instance of SqInfinityComponent.
    * @constructor
@@ -124,15 +129,15 @@ export class SqInfinityComponent implements AfterViewInit, AfterContentChecked,
     if (!this.loading && this.length > 0 && this.hasMore) {
       if (this.elementToScrollId && this.elementToScroll instanceof HTMLElement) {
         const allScroll = this.elementToScroll?.scrollTop + this.elementToScroll?.clientHeight
-        if (allScroll >= this.elementToScroll?.scrollHeight) {
+        if (allScroll + this.tresholdScroll >= this.elementToScroll?.scrollHeight) {
           this.elementToScroll?.removeEventListener('scroll', this.onScroll, false)
           this.scrolledEmitter.emit()
           this.elementToScroll?.addEventListener('scroll', this.onScroll, false)
         }
       } else if (this.elementToScroll instanceof Window) {
         const elementHeight = this.elementToScroll?.innerHeight
         const elementY = this.elementToScroll?.scrollY
-        if (elementHeight + elementY >= this.scrollElement?.nativeElement.offsetHeight + this.scrollElement?.nativeElement.offsetTop) {
+        if (elementHeight + elementY + this.tresholdScroll >= this.scrollElement?.nativeElement.offsetHeight + this.scrollElement?.nativeElement.offsetTop) {
           this.elementToScroll?.removeEventListener('scroll', this.onScroll, false)
           this.scrolledEmitter.emit()
           this.elementToScroll?.addEventListener('scroll', this.onScroll, false)