Q: Angular with jQuery capture scroll I have a plunker here - https://plnkr.co/edit/N6UuQJbOfdtmQygpr6cL?p=preview
I have a simple table in an Angular app, the table scrolls left to right
I'm using jQuery to capture when the page scrolls - I'm outputting a simple console log. 
I'm doing this for a simple sticky header on the table that isnt in the example.
I also need to capture the when the table scrolls left to right.
This doesn;'t work and I dont get an console log.
Is there a way to capture the left/right scroll in the table with jQuery
import {Component, OnInit} from '@angular/core';
declare let $: any;

@Component({
  selector: 'my-app',
  templateUrl: './src/app.html'
})

export class AppComponent implements OnInit{


  constructor() {

  }

  ngOnInit(){
    this.scrollWindow();
    this.scrollTable();
  }

  scrollWindow(){
    $(function(){

        $(window).on('scroll', function(){
          console.log('window scroll')
        })

    })
  }  

  scrollTable(){
    $(function(){

        $(table).on('scroll mousewheel', function(){
          console.log('table scroll')
        })

    })
  }  
}


A: You can do this without jquery, use (scroll) event binding. To bind to window scroll event, use it like this: (window:scroll)="onScroll()".
// in template
<div (window:scroll)="onWindowScroll($event)"> ... </div>
<table (scroll)="onTableScroll($event)"> ... </table>

// in controller
public onWindowScroll(e): void {
  console.log(e);
}

public onTableScroll(e): void {
  console.log(e);
}


A: You can use HostListener and import in your component
import {  HostListener} from '@angular/core';

and inside  your component create function onWindowScroller.and top of the function call HostListener('window:scroll')
@HostListener('window:scroll', [])
  onWindowScroll() {
      if (document.documentElement.scrollTop > 700) {
        console.log('+700');
      } else {
        console.log('-700');
      }    
  }

and you can use this code in a function
