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

Author: spike-rabbit

src/cdk/scrolling/scrollable.ts

@@ -45,17 +45,11 @@ export type ExtendedScrollToOptions = _XAxis & _YAxis & ScrollOptions;
   selector: '[cdk-scrollable], [cdkScrollable]',
 })
 export class CdkScrollable implements OnInit, OnDestroy {
-  private readonly _destroyed = new Subject<void>();
+  protected readonly _destroyed = new Subject<void>();
 
-  private _elementScrolled: Observable<Event> = new Observable((observer: Observer<Event>) =>
+  protected _elementScrolled: Observable<Event> = new Observable((observer: Observer<Event>) =>
     this.ngZone.runOutsideAngular(() =>
-      /* it seems like scroll-events are not fired on the documentElement, event if it's the actual scrolling element */
-      fromEvent(
-        this.elementRef.nativeElement === document.documentElement
-          ? document
-          : this.elementRef.nativeElement,
-        'scroll',
-      )
+      fromEvent(this.elementRef.nativeElement, 'scroll')
         .pipe(takeUntil(this._destroyed))
         .subscribe(observer),
     ),

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

@@ -20,7 +20,6 @@ import {
   OnInit,
   Optional,
   Output,
-  Renderer2,
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
@@ -69,8 +68,11 @@ const SCROLL_SCHEDULER =
   providers: [
     {
       provide: CdkScrollable,
-      useFactory: (scrollViewport: CdkVirtualScrollViewport) => scrollViewport.scrollable,
-      deps: [CdkVirtualScrollViewport],
+      useFactory: (
+        virtualScrollable: CdkVirtualScrollable | null,
+        viewport: CdkVirtualScrollViewport,
+      ) => virtualScrollable || viewport,
+      deps: [CdkVirtualScrollable, CdkVirtualScrollViewport],
     },
   ],
 })
@@ -86,6 +88,7 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
   get orientation() {
     return this._orientation;
   }
+
   set orientation(orientation: 'horizontal' | 'vertical') {
     if (this._orientation !== orientation) {
       this._orientation = orientation;
@@ -182,7 +185,6 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
     @Optional() dir: Directionality,
     scrollDispatcher: ScrollDispatcher,
     viewportRuler: ViewportRuler,
-    renderer: Renderer2,
     @Optional() @Inject(VIRTUAL_SCROLLABLE) public scrollable: CdkVirtualScrollable,
   ) {
     super(elementRef, scrollDispatcher, ngZone, dir);
@@ -197,7 +199,7 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
 
     if (!this.scrollable) {
       // No scrollable is provided, so the virtual-scroll-viewport needs to become a scrollable
-      renderer.addClass(this.elementRef.nativeElement, 'cdk-virtual-scrollable');
+      this.elementRef.nativeElement.classList.add('cdk-virtual-scrollable');
       this.scrollable = this;
     }
   }
@@ -292,6 +294,10 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
     return this._renderedRange;
   }
 
+  getBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number {
+    return this.getElementRef().nativeElement.getBoundingClientRect()[from];
+  }
+
   /**
    * Sets the total size of all content (in pixels), including content that is not currently
    * rendered.
@@ -423,9 +429,7 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
       fromRect = this.orientation === 'horizontal' ? 'left' : 'top';
     }
 
-    const scrollerClientRect = this.scrollable
-      .getElementRef()
-      .nativeElement.getBoundingClientRect()[fromRect];
+    const scrollerClientRect = this.scrollable.getBoundingClientRectWithScrollOffset(fromRect);
     const viewportClientRect = this.elementRef.nativeElement.getBoundingClientRect()[fromRect];
 
     return viewportClientRect - scrollerClientRect;

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

@@ -27,4 +27,11 @@ export class CdkVirtualScrollableElement extends CdkVirtualScrollable {
   ) {
     super(elementRef, scrollDispatcher, ngZone, dir);
   }
+
+  getBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number {
+    return (
+      this.getElementRef().nativeElement.getBoundingClientRect()[from] -
+      this.measureScrollOffset(from)
+    );
+  }
 }

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

@@ -8,6 +8,8 @@
 
 import {Directionality} from '@angular/cdk/bidi';
 import {Directive, ElementRef, NgZone, Optional} from '@angular/core';
+import {fromEvent, Observable, Observer} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
 import {ScrollDispatcher} from './scroll-dispatcher';
 import {CdkVirtualScrollable, VIRTUAL_SCROLLABLE} from './virtual-scrollable';
 
@@ -16,7 +18,18 @@ import {CdkVirtualScrollable, VIRTUAL_SCROLLABLE} from './virtual-scrollable';
   providers: [{provide: VIRTUAL_SCROLLABLE, useExisting: CdkVirtualScrollableWindow}],
 })
 export class CdkVirtualScrollableWindow extends CdkVirtualScrollable {
+  protected override _elementScrolled: Observable<Event> = new Observable(
+    (observer: Observer<Event>) =>
+      this.ngZone.runOutsideAngular(() =>
+        fromEvent(document, 'scroll').pipe(takeUntil(this._destroyed)).subscribe(observer),
+      ),
+  );
+
   constructor(scrollDispatcher: ScrollDispatcher, ngZone: NgZone, @Optional() dir: Directionality) {
     super(new ElementRef(document.documentElement), scrollDispatcher, ngZone, dir);
   }
+
+  getBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number {
+    return this.getElementRef().nativeElement.getBoundingClientRect()[from];
+  }
 }

src/cdk/scrolling/virtual-scrollable.ts

@@ -28,4 +28,6 @@ export abstract class CdkVirtualScrollable extends CdkScrollable {
     const viewportEl = this.elementRef.nativeElement;
     return orientation === 'horizontal' ? viewportEl.clientWidth : viewportEl.clientHeight;
   }
+
+  abstract getBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number;
 }

tools/public_api_guard/cdk/scrolling.md

@@ -26,7 +26,6 @@ import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
 import { _RecycleViewRepeaterStrategy } from '@angular/cdk/collections';
-import { Renderer2 } from '@angular/core';
 import { Subject } from 'rxjs';
 import { Subscription } from 'rxjs';
 import { TemplateRef } from '@angular/core';
@@ -65,10 +64,14 @@ export class CdkFixedSizeVirtualScroll implements OnChanges {
 export class CdkScrollable implements OnInit, OnDestroy {
     constructor(elementRef: ElementRef<HTMLElement>, scrollDispatcher: ScrollDispatcher, ngZone: NgZone, dir?: Directionality | undefined);
     // (undocumented)
+    protected readonly _destroyed: Subject<void>;
+    // (undocumented)
     protected dir?: Directionality | undefined;
     // (undocumented)
     protected elementRef: ElementRef<HTMLElement>;
     elementScrolled(): Observable<Event>;
+    // (undocumented)
+    protected _elementScrolled: Observable<Event>;
     getElementRef(): ElementRef<HTMLElement>;
     measureScrollOffset(from: 'top' | 'left' | 'right' | 'bottom' | 'start' | 'end'): number;
     // (undocumented)
@@ -142,6 +145,8 @@ export type CdkVirtualForOfContext<T> = {
 export abstract class CdkVirtualScrollable extends CdkScrollable {
     constructor(elementRef: ElementRef<HTMLElement>, scrollDispatcher: ScrollDispatcher, ngZone: NgZone, dir?: Directionality);
     // (undocumented)
+    abstract getBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number;
+    // (undocumented)
     measureViewportSize(orientation: 'horizontal' | 'vertical'): number;
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<CdkVirtualScrollable, never, never, {}, {}, never>;
@@ -153,6 +158,8 @@ export abstract class CdkVirtualScrollable extends CdkScrollable {
 export class CdkVirtualScrollableElement extends CdkVirtualScrollable {
     constructor(elementRef: ElementRef, scrollDispatcher: ScrollDispatcher, ngZone: NgZone, dir: Directionality);
     // (undocumented)
+    getBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number;
+    // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<CdkVirtualScrollableElement, "[cdk-virtual-scrollable-element], [cdkVirtualScrollableElement]", never, {}, {}, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkVirtualScrollableElement, [null, null, null, { optional: true; }]>;
@@ -162,6 +169,10 @@ export class CdkVirtualScrollableElement extends CdkVirtualScrollable {
 export class CdkVirtualScrollableWindow extends CdkVirtualScrollable {
     constructor(scrollDispatcher: ScrollDispatcher, ngZone: NgZone, dir: Directionality);
     // (undocumented)
+    protected _elementScrolled: Observable<Event>;
+    // (undocumented)
+    getBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number;
+    // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<CdkVirtualScrollableWindow, "cdk-virtual-scroll-viewport[scrollable-window]", never, {}, {}, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkVirtualScrollableWindow, [null, null, { optional: true; }]>;
@@ -177,7 +188,7 @@ export interface CdkVirtualScrollRepeater<T> {
 
 // @public
 export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements OnInit, OnDestroy {
-    constructor(elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, _scrollStrategy: VirtualScrollStrategy, dir: Directionality, scrollDispatcher: ScrollDispatcher, viewportRuler: ViewportRuler, renderer: Renderer2, scrollable: CdkVirtualScrollable);
+    constructor(elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, _scrollStrategy: VirtualScrollStrategy, dir: Directionality, scrollDispatcher: ScrollDispatcher, viewportRuler: ViewportRuler, scrollable: CdkVirtualScrollable);
     get appendOnly(): boolean;
     set appendOnly(value: BooleanInput);
     attach(forOf: CdkVirtualScrollRepeater<any>): void;
@@ -186,6 +197,8 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
     detach(): void;
     // (undocumented)
     elementRef: ElementRef<HTMLElement>;
+    // (undocumented)
+    getBoundingClientRectWithScrollOffset(from: 'left' | 'top' | 'right' | 'bottom'): number;
     getDataLength(): number;
     getOffsetToRenderedContentStart(): number | null;
     getRenderedRange(): ListRange;
@@ -215,7 +228,7 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<CdkVirtualScrollViewport, "cdk-virtual-scroll-viewport", never, { "orientation": "orientation"; "appendOnly": "appendOnly"; }, { "scrolledIndexChange": "scrolledIndexChange"; }, never, ["*"]>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<CdkVirtualScrollViewport, [null, null, null, { optional: true; }, { optional: true; }, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CdkVirtualScrollViewport, [null, null, null, { optional: true; }, { optional: true; }, null, null, { optional: true; }]>;
 }
 
 // @public