Aurelia Infinite Scroll custom attribute

infinite-scroll.ts

// Usage: div is the container that wraps your items.
// <div infinite-scroll loadmore.trigger="loadMoreStuff()"></div>

import {autoinject, bindable, DOM} from 'aurelia-framework';

@autoinject()
export class InfiniteScrollCustomAttribute {

    element: HTMLInputElement;
    onScroll: (event: Event) => void;

    constructor(element: Element) {
        this.element = element as HTMLInputElement;
    }

    attached() {
        this.onScroll = (event: Event) => {            
            let scrollTop = this.element.parentElement.scrollTop;
            let adjustForOtherZoomLevels = 2; // When other than 100% zoomed, scrollTop is a bit inaccurate by 0 to 2 pixels.
            let contentHeight = this.element.offsetHeight;
            let containerHeight = this.element.parentElement.offsetHeight;
            let scrollBottomThreshold = (contentHeight - containerHeight) - adjustForOtherZoomLevels;
            if (scrollTop >= scrollBottomThreshold) {
                this.raiseInfiniteScroll();
            }
        }

        this.element.parentElement.addEventListener('scroll', this.onScroll);
    }

    detached() {
        this.element.parentElement.removeEventListener('scroll', this.onScroll);
    }

    private raiseInfiniteScroll() {
        this.element.dispatchEvent(DOM.createCustomEvent('loadmore', { bubbles: true }));
    }
}