fixup! feat(cdk/scrolling): make scroller element configurable for virtual scrolling

Author: spike-rabbit

src/cdk/scrolling/virtual-scroll-viewport.spec.ts

@@ -1086,6 +1086,80 @@ describe('CdkVirtualScrollViewport', () => {
       expect(viewport.getOffsetToRenderedContentStart()).toBe(0);
     }));
   });
+
+  describe('with custom scrolling element', () => {
+    let fixture: ComponentFixture<VirtualScrollWithCustomScrollingElement>;
+    let testComponent: VirtualScrollWithCustomScrollingElement;
+    let viewport: CdkVirtualScrollViewport;
+
+    beforeEach(
+      waitForAsync(() => {
+        TestBed.configureTestingModule({
+          imports: [ScrollingModule],
+          declarations: [VirtualScrollWithCustomScrollingElement],
+        }).compileComponents();
+      }),
+    );
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(VirtualScrollWithCustomScrollingElement);
+      testComponent = fixture.componentInstance;
+      viewport = testComponent.viewport;
+    });
+
+    it('should measure viewport offset', fakeAsync(() => {
+      finishInit(fixture);
+
+      expect(viewport.measureViewportOffset('top'))
+        .withContext('with scrolling-element padding-top: 50 offset should be 50')
+        .toBe(50);
+    }));
+
+    it('should measure scroll offset', fakeAsync(() => {
+      finishInit(fixture);
+      triggerScroll(viewport, 100);
+      fixture.detectChanges();
+      flush();
+
+      expect(viewport.measureScrollOffset('top'))
+        .withContext('should be 50 (actual scroll offset - viewport offset)')
+        .toBe(50);
+    }));
+  });
+
+  describe('with scrollable window', () => {
+    let fixture: ComponentFixture<VirtualScrollWithScrollableWindow>;
+    let testComponent: VirtualScrollWithScrollableWindow;
+    let viewport: CdkVirtualScrollViewport;
+
+    beforeEach(
+      waitForAsync(() => {
+        TestBed.configureTestingModule({
+          imports: [ScrollingModule],
+          declarations: [VirtualScrollWithScrollableWindow],
+        }).compileComponents();
+      }),
+    );
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(VirtualScrollWithScrollableWindow);
+      testComponent = fixture.componentInstance;
+      viewport = testComponent.viewport;
+    });
+
+    it('should measure scroll offset', fakeAsync(() => {
+      finishInit(fixture);
+      viewport.scrollToOffset(100 + 8); // the +8 is due to a horizontal scrollbar
+      dispatchFakeEvent(window, 'scroll', true);
+      tick();
+      fixture.detectChanges();
+      flush();
+
+      expect(viewport.measureScrollOffset('top'))
+        .withContext('should be 50 (actual scroll offset - viewport offset)')
+        .toBe(50);
+    }));
+  });
 });
 
 /** Finish initializing the virtual scroll component at the beginning of a test. */
@@ -1109,7 +1183,7 @@ function triggerScroll(viewport: CdkVirtualScrollViewport, offset?: number) {
   if (offset !== undefined) {
     viewport.scrollToOffset(offset);
   }
-  dispatchFakeEvent(viewport.elementRef.nativeElement, 'scroll');
+  dispatchFakeEvent(viewport.scrollable.getElementRef().nativeElement, 'scroll');
   animationFrameScheduler.flush();
 }
 
@@ -1391,3 +1465,88 @@ class VirtualScrollWithAppendOnly {
     .fill(0)
     .map((_, i) => i);
 }
+
+@Component({
+  template: `
+    <div cdk-virtual-scrollable-element class="scrolling-element">
+      <cdk-virtual-scroll-viewport itemSize="50">
+        <div class="item" *cdkVirtualFor="let item of items">{{item}}</div>
+      </cdk-virtual-scroll-viewport>
+    </div>
+  `,
+  styles: [
+    `
+        .cdk-virtual-scroll-content-wrapper {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .cdk-virtual-scroll-viewport {
+            width: 200px;
+            height: 200px;
+            background-color: #f5f5f5;
+        }
+
+        .item {
+            width: 100%;
+            height: 50px;
+            box-sizing: border-box;
+            border: 1px dashed #ccc;
+        }
+
+        .scrolling-element {
+            padding-top: 50px;
+        }
+    `,
+  ],
+  encapsulation: ViewEncapsulation.None,
+})
+class VirtualScrollWithCustomScrollingElement {
+  @ViewChild(CdkVirtualScrollViewport, {static: true}) viewport: CdkVirtualScrollViewport;
+  itemSize = 50;
+  items = Array(20000)
+    .fill(0)
+    .map((_, i) => i);
+}
+
+@Component({
+  template: `
+    <div class="before-virtual-viewport"></div>
+    <cdk-virtual-scroll-viewport scrollable-window itemSize="50">
+      <div class="item" *cdkVirtualFor="let item of items">{{item}}</div>
+    </cdk-virtual-scroll-viewport>
+  `,
+  styles: [
+    `
+        .cdk-virtual-scroll-content-wrapper {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .cdk-virtual-scroll-viewport {
+            width: 200px;
+            height: 200px;
+            background-color: #f5f5f5;
+        }
+
+        .item {
+            width: 100%;
+            height: 50px;
+            box-sizing: border-box;
+            border: 1px dashed #ccc;
+        }
+
+        .before-virtual-viewport {
+            height: 50px;
+        }
+    `,
+  ],
+  encapsulation: ViewEncapsulation.None,
+})
+class VirtualScrollWithScrollableWindow {
+  @ViewChild(CdkVirtualScrollViewport, {static: true}) viewport: CdkVirtualScrollViewport;
+  itemSize = 50;
+  items = Array(20000)
+    .fill(0)
+    .map((_, i) => i);
+}

src/cdk/scrolling/virtual-scroll-viewport.ts

@@ -294,7 +294,7 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
     return this._renderedRange;
   }
 
-  getBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number {
+  measureBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number {
     return this.getElementRef().nativeElement.getBoundingClientRect()[from];
   }
 
@@ -416,6 +416,10 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
     );
   }
 
+  /**
+   * Measures the offset of the viewport from the scrolling container
+   * @param from The edge to measure from.
+   */
   measureViewportOffset(from?: 'top' | 'left' | 'right' | 'bottom' | 'start' | 'end') {
     let fromRect: 'left' | 'top' | 'right' | 'bottom';
     const LEFT = 'left';
@@ -431,7 +435,7 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
       fromRect = this.orientation === 'horizontal' ? 'left' : 'top';
     }
 
-    const scrollerClientRect = this.scrollable.getBoundingClientRectWithScrollOffset(fromRect);
+    const scrollerClientRect = this.scrollable.measureBoundingClientRectWithScrollOffset(fromRect);
     const viewportClientRect = this.elementRef.nativeElement.getBoundingClientRect()[fromRect];
 
     return viewportClientRect - scrollerClientRect;

src/cdk/scrolling/virtual-scrollable-element.ts

@@ -11,6 +11,9 @@ import {Directive, ElementRef, NgZone, Optional} from '@angular/core';
 import {ScrollDispatcher} from './scroll-dispatcher';
 import {CdkVirtualScrollable, VIRTUAL_SCROLLABLE} from './virtual-scrollable';
 
+/**
+ * Provides a virtual scrollable for the element it is attached to.
+ */
 @Directive({
   selector: '[cdk-virtual-scrollable-element], [cdkVirtualScrollableElement]',
   providers: [{provide: VIRTUAL_SCROLLABLE, useExisting: CdkVirtualScrollableElement}],
@@ -28,7 +31,9 @@ export class CdkVirtualScrollableElement extends CdkVirtualScrollable {
     super(elementRef, scrollDispatcher, ngZone, dir);
   }
 
-  getBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number {
+  override measureBoundingClientRectWithScrollOffset(
+    from: 'left' | 'top' | 'right' | 'bottom',
+  ): number {
     return (
       this.getElementRef().nativeElement.getBoundingClientRect()[from] -
       this.measureScrollOffset(from)

src/cdk/scrolling/virtual-scrollable-window.ts

@@ -13,6 +13,9 @@ import {takeUntil} from 'rxjs/operators';
 import {ScrollDispatcher} from './scroll-dispatcher';
 import {CdkVirtualScrollable, VIRTUAL_SCROLLABLE} from './virtual-scrollable';
 
+/**
+ * Provides as virtual scrollable for the global / window scrollbar.
+ */
 @Directive({
   selector: 'cdk-virtual-scroll-viewport[scrollable-window]',
   providers: [{provide: VIRTUAL_SCROLLABLE, useExisting: CdkVirtualScrollableWindow}],
@@ -29,7 +32,9 @@ export class CdkVirtualScrollableWindow extends CdkVirtualScrollable {
     super(new ElementRef(document.documentElement), scrollDispatcher, ngZone, dir);
   }
 
-  getBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number {
+  override measureBoundingClientRectWithScrollOffset(
+    from: 'left' | 'top' | 'right' | 'bottom',
+  ): number {
     return this.getElementRef().nativeElement.getBoundingClientRect()[from];
   }
 }

src/cdk/scrolling/virtual-scrollable.ts

@@ -13,6 +13,9 @@ import {CdkScrollable} from './scrollable';
 
 export const VIRTUAL_SCROLLABLE = new InjectionToken<CdkVirtualScrollable>('VIRTUAL_SCROLLABLE');
 
+/**
+ * Extending the {@link CdkScrollable} to be used as scrolling container for virtual scrolling.
+ */
 @Directive()
 export abstract class CdkVirtualScrollable extends CdkScrollable {
   constructor(
@@ -24,10 +27,22 @@ export abstract class CdkVirtualScrollable extends CdkScrollable {
     super(elementRef, scrollDispatcher, ngZone, dir);
   }
 
+  /**
+   * Measure the viewport size for the provided orientation.
+   *
+   * @param orientation The orientation to measure the size from.
+   */
   measureViewportSize(orientation: 'horizontal' | 'vertical') {
     const viewportEl = this.elementRef.nativeElement;
     return orientation === 'horizontal' ? viewportEl.clientWidth : viewportEl.clientHeight;
   }
 
-  abstract getBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number;
+  /**
+   * Measure the bounding ClientRect size including the scroll offset.
+   *
+   * @param from The edge to measure from.
+   */
+  abstract measureBoundingClientRectWithScrollOffset(
+    from: 'left' | 'top' | 'right' | 'bottom',
+  ): number;
 }