docs: add scroll example

Author: timdeschryver

apps/example-app/app/examples/13-scrolling.component.spec.ts

@@ -0,0 +1,19 @@
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/angular';
+
+import { CdkVirtualScrollOverviewExample } from './13-scrolling.component';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+
+test('should scroll to load more items', async () => {
+  await render(CdkVirtualScrollOverviewExample, {
+    imports: [ScrollingModule],
+  });
+
+  const item0 = await screen.findByText(/Item #0/i);
+  expect(item0).toBeVisible();
+
+  screen.getByTestId('scroll-viewport').scrollTop = 500;
+  await waitForElementToBeRemoved(() => screen.getByText(/Item #0/i));
+
+  const item12 = await screen.findByText(/Item #12/i);
+  expect(item12).toBeVisible();
+});

apps/example-app/app/examples/13-scrolling.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'cdk-virtual-scroll-overview-example',
+  template: `
+    <cdk-virtual-scroll-viewport itemSize="50" class="example-viewport" data-testid="scroll-viewport">
+      <div *cdkVirtualFor="let item of items" class="example-item">{{ item }}</div>
+    </cdk-virtual-scroll-viewport>
+  `,
+  styles: [
+    `
+      .example-viewport {
+        height: 200px;
+        width: 200px;
+        border: 1px solid black;
+      }
+
+      .example-item {
+        height: 50px;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CdkVirtualScrollOverviewExample {
+  items = Array.from({ length: 100 }).map((_, i) => `Item #${i}`);
+}

package.json

@@ -68,4 +68,4 @@
     "ts-node": "~8.10.2",
     "typescript": "~3.9.5"
   }
-}
+}