scrolling view impl - closes #4

src/contents-section.directive.ts

@@ -8,7 +8,7 @@ import {
   OnInit,
 } from '@angular/core';
 
-import { getAbsoluteHeight } from './html-utils';
+import { documentOffset, getAbsoluteHeight } from './html-utils';
 import { ContentsDirective } from './contents.directive';
 
 @Directive({
@@ -25,17 +25,19 @@ export class ContentsSectionDirective implements OnInit {
 
   ngOnInit() {
     this.detectActiveChanges();
+    this.contents._onScroll$.subscribe((event: Event) => {
+      this.detectActiveChanges();
+    });
   }
 
-  @HostListener('window:scroll', ['$event'])
   detectActiveChanges() {
     if (this.isInRange() || !this.contents._activeSection$.value) {
       this.contents._activeSection$.next(this.contentsSection);
     }
   }
 
   isInRange(): boolean {
-    const pageOffset: number = window.pageYOffset;
+    const pageOffset: number = this.contents.scrollingView ? this.contents.scrollingView.scrollTop : documentOffset();
     const element: HTMLElement = this.elementRef.nativeElement;
     const offset: number = element.offsetTop;
     const height: number = getAbsoluteHeight(element);

src/contents.directive.ts

@@ -1,17 +1,28 @@
-import { Directive, ElementRef } from '@angular/core';
+import { Directive, ElementRef, Input, OnInit } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import 'rxjs/add/operator/filter';
 
 @Directive({
   selector: '[contents]',
   exportAs: 'contents',
 })
-export class ContentsDirective {
+export class ContentsDirective implements OnInit {
+  @Input() scrollingView: HTMLElement;
+
+  _onScroll$: Subject<Event> = new Subject<Event>();
   _activeSection$: BehaviorSubject<String> = new BehaviorSubject<String>(null);
 
   constructor() { }
 
+  ngOnInit() {
+    // Subscribe to scrollingView scroll events. Sections will detectChanges() on scroll changes.
+    (this.scrollingView || document).addEventListener('scroll', (event: Event) => {
+      this._onScroll$.next(event);
+    });
+  }
+
   activeSection(): Observable<String> {
     return this._activeSection$
       .asObservable()

src/html-utils.ts

@@ -6,3 +6,8 @@ export function getAbsoluteHeight(element: HTMLElement) {
 
   return Math.ceil(element.offsetHeight + margin);
 }
+
+// https://stackoverflow.com/a/20478983
+export function documentOffset() {
+  return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+}