virtual-scroll: add logic to correct the scroll position as user moves toward the top

Author: mmalerba

src/cdk-experimental/scrolling/auto-size-virtual-scroll.ts

@@ -144,6 +144,13 @@ export class AutoSizeVirtualScrollStrategy implements VirtualScrollStrategy {
     }
   }
 
+  /** Implemented as part of VirtualScrollStrategy. */
+  onRenderedOffsetChanged() {
+    if (this._viewport) {
+      this._checkRenderedContentOffset();
+    }
+  }
+
   /**
    * Update the buffer parameters.
    * @param minBufferPx The minimum amount of buffer rendered beyond the viewport (in pixels).
@@ -162,13 +169,38 @@ export class AutoSizeVirtualScrollStrategy implements VirtualScrollStrategy {
     // The current scroll offset.
     const scrollOffset = viewport.measureScrollOffset();
     // The delta between the current scroll offset and the previously recorded scroll offset.
-    const scrollDelta = scrollOffset - this._lastScrollOffset;
+    let scrollDelta = scrollOffset - this._lastScrollOffset;
     // The magnitude of the scroll delta.
-    const scrollMagnitude = Math.abs(scrollDelta);
+    let scrollMagnitude = Math.abs(scrollDelta);
 
-    // TODO(mmalerba): Record error between actual scroll offset and predicted scroll offset given
-    // the index of the first rendered element. Fudge the scroll delta to slowly eliminate the error
-    // as the user scrolls.
+    // The currently rendered range.
+    const renderedRange = viewport.getRenderedRange();
+
+    // If we're scrolling toward the top, we need to account for the fact that the predicted amount
+    // of content and the actual amount of scrollable space may differ. We address this by slowly
+    // correcting the difference on each scroll event.
+    let offsetCorrection = 0;
+    if (scrollDelta < 0) {
+      // The content offset we would expect based on the average item size.
+      const predictedOffset = renderedRange.start * this._averager.getAverageItemSize();
+      // The difference between the predicted size of the unrendered content at the beginning and
+      // the actual available space to scroll over. We need to reduce this to zero by the time the
+      // user scrolls to the top.
+      // - 0 indicates that the predicted size and available space are the same.
+      // - A negative number that the predicted size is smaller than the available space.
+      // - A positive number indicates the predicted size is larger than the available space
+      const offsetDifference = predictedOffset - this._lastRenderedContentOffset;
+      // The amount of difference to correct during this scroll event. We calculate this as a
+      // percentage of the total difference based on the percentage of the distance toward the top
+      // that the user scrolled.
+      offsetCorrection = Math.round(offsetDifference *
+          Math.max(0, Math.min(1, scrollMagnitude / (scrollOffset + scrollMagnitude))));
+
+      // Based on the offset correction above, we pretend that the scroll delta was bigger or
+      // smaller than it actually was, this way we can start to eliminate the difference.
+      scrollDelta = scrollDelta - offsetCorrection;
+      scrollMagnitude = Math.abs(scrollDelta);
+    }
 
     // The current amount of buffer past the start of the viewport.
     const startBuffer = this._lastScrollOffset - this._lastRenderedContentOffset;
@@ -190,8 +222,6 @@ export class AutoSizeVirtualScrollStrategy implements VirtualScrollStrategy {
       if (scrollMagnitude >= viewport.getViewportSize()) {
         this._setScrollOffset();
       } else {
-        // The currently rendered range.
-        const renderedRange = viewport.getRenderedRange();
         // The number of new items to render on the side the user is scrolling towards. Rather than
         // just filling the underscan space, we actually fill enough to have a buffer size of
         // `addBufferPx`. This gives us a little wiggle room in case our item size estimate is off.
@@ -265,8 +295,12 @@ export class AutoSizeVirtualScrollStrategy implements VirtualScrollStrategy {
 
         // Set the range and offset we calculated above.
         viewport.setRenderedRange(range);
-        viewport.setRenderedContentOffset(contentOffset, contentOffsetTo);
+        viewport.setRenderedContentOffset(contentOffset + offsetCorrection, contentOffsetTo);
       }
+    } else if (offsetCorrection) {
+      // Even if the rendered range didn't change, we may still need to adjust the content offset to
+      // simulate scrolling slightly slower or faster than the user actually scrolled.
+      viewport.setRenderedContentOffset(this._lastRenderedContentOffset + offsetCorrection);
     }
 
     // Save the scroll offset to be compared to the new value on the next scroll event.
@@ -279,12 +313,16 @@ export class AutoSizeVirtualScrollStrategy implements VirtualScrollStrategy {
    */
   private _checkRenderedContentSize() {
     const viewport = this._viewport!;
-    this._lastRenderedContentOffset = viewport.getOffsetToRenderedContentStart()!;
     this._lastRenderedContentSize = viewport.measureRenderedContentSize();
     this._averager.addSample(viewport.getRenderedRange(), this._lastRenderedContentSize);
     this._updateTotalContentSize(this._lastRenderedContentSize);
   }
 
+  private _checkRenderedContentOffset() {
+    const viewport = this._viewport!;
+    this._lastRenderedContentOffset = viewport.getOffsetToRenderedContentStart()!;
+  }
+
   /**
    * Sets the scroll offset and renders the content we estimate should be shown at that point.
    * @param scrollOffset The offset to jump to. If not specified the scroll offset will not be

src/cdk-experimental/scrolling/fixed-size-virtual-scroll.ts

@@ -60,20 +60,23 @@ export class FixedSizeVirtualScrollStrategy implements VirtualScrollStrategy {
     this._updateRenderedRange();
   }
 
-  /** Called when the viewport is scrolled. */
+  /** Implemented as part of VirtualScrollStrategy. */
   onContentScrolled() {
     this._updateRenderedRange();
   }
 
-  /** Called when the length of the data changes. */
+  /** Implemented as part of VirtualScrollStrategy. */
   onDataLengthChanged() {
     this._updateTotalContentSize();
     this._updateRenderedRange();
   }
 
-  /** Called when the range of items rendered in the DOM has changed. */
+  /** Implemented as part of VirtualScrollStrategy. */
   onContentRendered() { /* no-op */ }
 
+  /** Implemented as part of VirtualScrollStrategy. */
+  onRenderedOffsetChanged() { /* no-op */ }
+
   /** Update the viewport's total content size. */
   private _updateTotalContentSize() {
     if (!this._viewport) {

src/cdk-experimental/scrolling/virtual-for-of.ts

@@ -147,8 +147,15 @@ export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy
       private _differs: IterableDiffers,
       /** The virtual scrolling viewport that these items are being rendered in. */
       @SkipSelf() private _viewport: CdkVirtualScrollViewport) {
-    this.dataStream.subscribe(data => this._data = data);
-    this._viewport.renderedRangeStream.subscribe(range => this._onRenderedRangeChange(range));
+    this.dataStream.subscribe(data => {
+      this._data = data;
+      this._onRenderedDataChange();
+    });
+    this._viewport.renderedRangeStream.subscribe(range => {
+      this._renderedRange = range;
+      this.viewChange.next(this._renderedRange);
+      this._onRenderedDataChange();
+    });
     this._viewport.attach(this);
   }
 
@@ -213,9 +220,10 @@ export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy
   }
 
   /** React to scroll state changes in the viewport. */
-  private _onRenderedRangeChange(renderedRange: ListRange) {
-    this._renderedRange = renderedRange;
-    this.viewChange.next(this._renderedRange);
+  private _onRenderedDataChange() {
+    if (!this._renderedRange) {
+      return;
+    }
     this._renderedItems = this._data.slice(this._renderedRange.start, this._renderedRange.end);
     if (!this._differ) {
       this._differ = this._differs.find(this._renderedItems).create(this.cdkVirtualForTrackBy);

src/cdk-experimental/scrolling/virtual-scroll-strategy.ts

@@ -34,4 +34,7 @@ export interface VirtualScrollStrategy {
 
   /** Called when the range of items rendered in the DOM has changed. */
   onContentRendered();
+
+  /** Called when the offset of the rendered items changed. */
+  onRenderedOffsetChanged();
 }

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

@@ -71,6 +71,9 @@ export class CdkVirtualScrollViewport implements DoCheck, OnInit, OnDestroy {
   /** The transform used to offset the rendered content wrapper element. */
   _renderedContentTransform: SafeStyle;
 
+  /** The raw string version of the rendered content transform. */
+  private _rawRenderedContentTransform: string;
+
   /** The currently rendered range of indices. */
   private _renderedRange: ListRange = {start: 0, end: 0};
 
@@ -214,14 +217,6 @@ export class CdkVirtualScrollViewport implements DoCheck, OnInit, OnDestroy {
           //
           // The call to `onContentRendered` will happen after all of the updates have been applied.
           Promise.resolve().then(() => {
-            // If the rendered content offset was specified as an offset to the end of the content,
-            // rewrite it as an offset to the start of the content.
-            if (this._renderedContentOffsetNeedsRewrite) {
-              this._renderedContentOffset -= this.measureRenderedContentSize();
-              this._renderedContentOffsetNeedsRewrite = false;
-              this.setRenderedContentOffset(this._renderedContentOffset);
-            }
-
             this._scrollStrategy.onContentRendered();
           });
         }));
@@ -251,13 +246,27 @@ export class CdkVirtualScrollViewport implements DoCheck, OnInit, OnDestroy {
       transform += ` translate${axis}(-100%)`;
       this._renderedContentOffsetNeedsRewrite = true;
     }
-    if (this._renderedContentTransform != transform) {
+    if (this._rawRenderedContentTransform != transform) {
       // Re-enter the Angular zone so we can mark for change detection.
       this._ngZone.run(() => {
         // We know this value is safe because we parse `offset` with `Number()` before passing it
         // into the string.
+        this._rawRenderedContentTransform = transform;
         this._renderedContentTransform = this._sanitizer.bypassSecurityTrustStyle(transform);
         this._changeDetectorRef.markForCheck();
+
+        // If the rendered content offset was specified as an offset to the end of the content,
+        // rewrite it as an offset to the start of the content.
+        if (this._renderedContentOffsetNeedsRewrite) {
+          this._ngZone.onStable.pipe(take(1)).subscribe(() => {
+            this._renderedContentOffset -= this.measureRenderedContentSize();
+            this._renderedContentOffsetNeedsRewrite = false;
+            this.setRenderedContentOffset(this._renderedContentOffset);
+          });
+        } else {
+          this._ngZone.onStable.pipe(take(1))
+              .subscribe(() => this._scrollStrategy.onRenderedOffsetChanged());
+        }
       });
     }
   }

src/demo-app/virtual-scroll/virtual-scroll-demo.html

@@ -51,9 +51,46 @@ <h2>Fixed size</h2>
 
 <h2>Observable data</h2>
 
+<button (click)="emitData()">Add item</button>
 <cdk-virtual-scroll-viewport class="demo-viewport" [itemSize]="50">
-  <div *cdkVirtualFor="let size of observableData; let i = index" class="demo-item"
+  <div *cdkVirtualFor="let size of observableData | async; let i = index" class="demo-item"
        [style.height.px]="size">
     Item #{{i}} - ({{size}}px)
   </div>
 </cdk-virtual-scroll-viewport>
+
+<h2>No trackBy</h2>
+
+<button (click)="sortBy('name')">Sort by state name</button>
+<button (click)="sortBy('capital')">Sort by state capital</button>
+<cdk-virtual-scroll-viewport class="demo-viewport" [itemSize]="60">
+  <div *cdkVirtualFor="let state of statesObservable | async"
+       class="demo-state-item">
+    <div class="demo-state">{{state.name}}</div>
+    <div class="demo-capital">{{state.capital}}</div>
+  </div>
+</cdk-virtual-scroll-viewport>
+
+<h2>trackBy index</h2>
+
+<button (click)="sortBy('name')">Sort by state name</button>
+<button (click)="sortBy('capital')">Sort by state capital</button>
+<cdk-virtual-scroll-viewport class="demo-viewport" [itemSize]="60">
+  <div *cdkVirtualFor="let state of statesObservable | async; trackBy: indexTrackFn"
+       class="demo-state-item">
+    <div class="demo-state">{{state.name}}</div>
+    <div class="demo-capital">{{state.capital}}</div>
+  </div>
+</cdk-virtual-scroll-viewport>
+
+<h2>trackBy state name</h2>
+
+<button (click)="sortBy('name')">Sort by state name</button>
+<button (click)="sortBy('capital')">Sort by state capital</button>
+<cdk-virtual-scroll-viewport class="demo-viewport" [itemSize]="60">
+  <div *cdkVirtualFor="let state of statesObservable | async; trackBy: nameTrackFn"
+       class="demo-state-item">
+    <div class="demo-state">{{state.name}}</div>
+    <div class="demo-capital">{{state.capital}}</div>
+  </div>
+</cdk-virtual-scroll-viewport>

src/demo-app/virtual-scroll/virtual-scroll-demo.scss

@@ -24,3 +24,19 @@
     writing-mode: vertical-lr;
   }
 }
+
+.demo-state-item {
+  height: 60px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.demo-state {
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.demo-capital {
+  font-size: 14px;
+}

src/demo-app/virtual-scroll/virtual-scroll-demo.ts

@@ -9,6 +9,13 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 import {BehaviorSubject} from 'rxjs/index';
 
+
+type State = {
+  name: string,
+  capital: string
+};
+
+
 @Component({
   moduleId: module.id,
   selector: 'virtual-scroll-demo',
@@ -23,6 +30,61 @@ export class VirtualScrollDemo {
       .map((_, i) => (1 + Math.floor((10000 - i) / 1000)) * 20);
   randomData = Array(10000).fill(0).map(() => Math.round(Math.random() * 100));
   observableData = new BehaviorSubject<number[]>([]);
+  states = [
+    {name: 'Alabama', capital: 'Montgomery'},
+    {name: 'Alaska', capital: 'Juneau'},
+    {name: 'Arizona', capital: 'Phoenix'},
+    {name: 'Arkansas', capital: 'Little Rock'},
+    {name: 'California', capital: 'Sacramento'},
+    {name: 'Colorado', capital: 'Denver'},
+    {name: 'Connecticut', capital: 'Hartford'},
+    {name: 'Delaware', capital: 'Dover'},
+    {name: 'Florida', capital: 'Tallahassee'},
+    {name: 'Georgia', capital: 'Atlanta'},
+    {name: 'Hawaii', capital: 'Honolulu'},
+    {name: 'Idaho', capital: 'Boise'},
+    {name: 'Illinois', capital: 'Springfield'},
+    {name: 'Indiana', capital: 'Indianapolis'},
+    {name: 'Iowa', capital: 'Des Moines'},
+    {name: 'Kansas', capital: 'Topeka'},
+    {name: 'Kentucky', capital: 'Frankfort'},
+    {name: 'Louisiana', capital: 'Baton Rouge'},
+    {name: 'Maine', capital: 'Augusta'},
+    {name: 'Maryland', capital: 'Annapolis'},
+    {name: 'Massachusetts', capital: 'Boston'},
+    {name: 'Michigan', capital: 'Lansing'},
+    {name: 'Minnesota', capital: 'St. Paul'},
+    {name: 'Mississippi', capital: 'Jackson'},
+    {name: 'Missouri', capital: 'Jefferson City'},
+    {name: 'Montana', capital: 'Helena'},
+    {name: 'Nebraska', capital: 'Lincoln'},
+    {name: 'Nevada', capital: 'Carson City'},
+    {name: 'New Hampshire', capital: 'Concord'},
+    {name: 'New Jersey', capital: 'Trenton'},
+    {name: 'New Mexico', capital: 'Santa Fe'},
+    {name: 'New York', capital: 'Albany'},
+    {name: 'North Carolina', capital: 'Raleigh'},
+    {name: 'North Dakota', capital: 'Bismarck'},
+    {name: 'Ohio', capital: 'Columbus'},
+    {name: 'Oklahoma', capital: 'Oklahoma City'},
+    {name: 'Oregon', capital: 'Salem'},
+    {name: 'Pennsylvania', capital: 'Harrisburg'},
+    {name: 'Rhode Island', capital: 'Providence'},
+    {name: 'South Carolina', capital: 'Columbia'},
+    {name: 'South Dakota', capital: 'Pierre'},
+    {name: 'Tennessee', capital: 'Nashville'},
+    {name: 'Texas', capital: 'Austin'},
+    {name: 'Utah', capital: 'Salt Lake City'},
+    {name: 'Vermont', capital: 'Montpelier'},
+    {name: 'Virginia', capital: 'Richmond'},
+    {name: 'Washington', capital: 'Olympia'},
+    {name: 'West Virginia', capital: 'Charleston'},
+    {name: 'Wisconsin', capital: 'Madison'},
+    {name: 'Wyoming', capital: 'Cheyenne'},
+  ];
+  statesObservable = new BehaviorSubject(this.states);
+  indexTrackFn = (index: number) => index;
+  nameTrackFn = (_: number, item: State) => item.name;
 
   constructor() {
     this.emitData();
@@ -31,8 +93,12 @@ export class VirtualScrollDemo {
   emitData() {
     let data = this.observableData.value.concat([50]);
     this.observableData.next(data);
-    if (data.length < 1000) {
-      setTimeout(() => this.emitData(), 1000);
-    }
+  }
+
+  sortBy(prop: 'name' | 'capital') {
+    this.statesObservable.next(this.states.map(s => ({...s})).sort((a, b) => {
+      const aProp = a[prop], bProp = b[prop];
+      return aProp < bProp ? -1 : (aProp > bProp ? 1 : 0);
+    }));
   }
 }