Angular with jQuery capture scroll

Question

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')
        })

    })
  }  
}

I would not recommend you to do that with `jQuery` or vanilla, because you are cheating on angulars principles since your accessing the `DOM` directly. This breaks the cross-platform compatibility. Here is some good resource: http://brianflove.com/2016/10/10/angular-2-window-scroll-event-using-hostlistener/ — Orlandster, Apr 21 '18 at 10:55
Orlandster, I used jquey because in the actual app I need the table header to be sticky like this - https://plnkr.co/edit/dRl85WPvKVkjt715YLhE?p=preview — ttmt, Apr 21 '18 at 14:29

score 0 · Answer 1 · answered Apr 21 '18 at 10:44

0

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);
}

answered Apr 21 '18 at 10:44

Martin Adámek

16,771
5
45
64

Martin Id like to do it with Angular but how do I make the header sticky like this on scrolling https://plnkr.co/edit/dRl85WPvKVkjt715YLhE?p=preview – ttmt Apr 21 '18 at 11:09
You can do the same with angular, you can get the scroll `scrollY` from `$event` parameter I guess, and to mutate DOM/CSS, you can use `Renderer2`. https://alligator.io/angular/using-renderer2/#setstyle--removestyle – Martin Adámek Apr 21 '18 at 11:13
Take a look here how to get scroll position without jquery: https://stackoverflow.com/questions/11193453/find-the-vertical-position-of-scrollbar-without-jquery – Martin Adámek Apr 21 '18 at 11:15

score -1 · Answer 2 · answered Apr 21 '18 at 12:16

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

Angular with jQuery capture scroll

2 Answers2