Prevent scrolling of child element to propagate in Angular 2

[Robert Smith]

I asked this question on SO and maybe somebody here would be kind enough to answer it. Basically, the problem is that I have a parent component and a child component, both able to scroll but I'm experiencing the common issue in which after reaching the bottom of the child component, its parent component begins to scroll down. I think the following GIF can be helpful to describe this issue:

I was trying to fix this by using a custom directive:

@Directive({
    selector: '[scroller]',
})
export class ScrollerDirective {
    constructor(private elRef: ElementRef, private renderer: Renderer) {
        renderer.listen(elRef.nativeElement, 'scroll', (event) => {
            console.log('event!');
            event.stopPropagation();
            event.preventDefault();
        })
    }


}

Does anyone know how to fix this?

Regards

[Robert Smith]

I posted an answer, although there seems to be a small bug in Chrome dev. This is basically what I did:

renderer.listen(elRef.nativeElement, 'wheel', (e) => {
    let el = elRef.nativeElement;
    let conditions = ((el.scrollTop +  el.offsetHeight >  el.scrollHeight)) && e.deltaY > 0 || el.scrollTop === 0 & e.deltaY < 0;
    if (conditions) {
        e = e || window.event;
        if (e.preventDefault)
            e.preventDefault();
        e.returnValue = false;
    }
}, false)

Demo

If you have suggestions or improvements, please let me know.

Regards