feat(template): add scrollMargin configuration to RxVirtualView

eneajaho · eneajaho · commit ab6a5634c11e · 2026-02-02T13:31:17.000+01:00
Introduced a new `scrollMargin` property in the `RxVirtualViewConfig` interface and updated the `RxVirtualViewObserver` directive to utilize this configuration. This enhancement allows for more precise observation of the virtual view within a specified scroll area, improving visibility handling in various scenarios.
diff --git a/libs/template/virtual-view/src/lib/virtual-view-observer.directive.ts b/libs/template/virtual-view/src/lib/virtual-view-observer.directive.ts
@@ -19,6 +19,7 @@ import { distinctUntilChanged, finalize, map } from 'rxjs/operators';
 import { _RxVirtualViewObserver } from './model';
 import { RxaResizeObserver } from './resize-observer';
 import { PLATFORM } from './util';
+import { VIRTUAL_VIEW_CONFIG_TOKEN } from './virtual-view.config';
 import { VirtualViewCache } from './virtual-view-cache';
 
 /**
@@ -52,6 +53,7 @@ export class RxVirtualViewObserver
   extends _RxVirtualViewObserver
   implements OnInit, OnDestroy
 {
+  #config = inject(VIRTUAL_VIEW_CONFIG_TOKEN);
   #platform = inject(PLATFORM);
   #elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
 
@@ -73,6 +75,13 @@ export class RxVirtualViewObserver
    */
   rootMargin = input('');
 
+  /**
+   * The scroll margin to observe.
+   *
+   * This is useful when you want to observe the virtual view in a specific area of the scroll container.
+   */
+  scrollMargin = input(this.#config.scrollMargin);
+
   /**
    * The threshold to observe.
    *
@@ -111,6 +120,8 @@ export class RxVirtualViewObserver
         {
           root: this.#rootElement(),
           rootMargin: this.rootMargin(),
+          // @ts-expect-error - scrollMargin is not available in the type of IntersectionObserverInit
+          scrollMargin: this.scrollMargin(),
           threshold: this.threshold(),
         },
       );
diff --git a/libs/template/virtual-view/src/lib/virtual-view.config.ts b/libs/template/virtual-view/src/lib/virtual-view.config.ts
@@ -17,6 +17,13 @@ export interface RxVirtualViewConfig {
   cacheEnabled: boolean;
   startWithPlaceholderAsap: boolean;
 
+  /**
+   * The scroll margin to observe.
+   *
+   * Docs: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#scrollmargin
+   */
+  scrollMargin: string;
+
   /**
    * Whether to enable the visibility after hydration. (DEFAULT: true)
    *
@@ -51,6 +58,8 @@ export const VIRTUAL_VIEW_CONFIG_DEFAULT: RxVirtualViewConfig = {
   cacheEnabled: true,
   enableAfterHydration: true,
 
+  scrollMargin: '100px',
+
   cache: {
     contentCacheSize: 20,
     placeholderCacheSize: 20,
