7

I have defined template

@Component({
    selector: 'name',
    directives: [ ... ],
    templateUrl: 'name.html'
})

and class

export class ProductGridComponent implements OnInit {
    @HostListener('scroll', ['$event'])
    onScroll(e) {
        alert(window.pageYOffset)
    }

    products = [];
}

But it does not shot anything , however when i replace scroll and onScroll with click and onClick it indeed show the alert.

Why does not it work with scroll , does angular2 has any other implementation for it?

Thanks

8
  • I think it should work. Can you reproduce in a Plunker? Aug 3, 2016 at 16:05
  • The code is quite big so i wont be able to , indeed with click it works but not with scroll , weird
    – Darlyn
    Aug 3, 2016 at 16:07
  • Perhaps the scroll event is fired by the parent component? Aug 3, 2016 at 16:07
  • You don't need to migrate the full example to Plunker, just as much that the problem can be reproduced. If you can't provide enough information to reproduce it, then answering is just guesswork. Aug 3, 2016 at 16:09
  • 2

7 Answers 7

15

Assuming you want to display the host scroll (and not the windows one) and that you are using angular +2.1

  @HostListener('scroll', ['$event']) private onScroll($event:Event):void {
    console.log($event.srcElement.scrollLeft, $event.srcElement.scrollTop);
  };
0
9

You can create a custom directive like bellow

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[scroller]'
})
export class ScrollerDirective {

  @HostListener('scroll') scrolling(){
    console.log('scrolling');
  }

  @HostListener('click') clicking(){
    console.log('clicking...');
  }

  constructor() { }

}

And then assuming you have a html template like

<div class="full-width" scroller>
    <div class="double-width"></div>
</div>

use the following css

.full-width{
    width: 200px;
    height: 200px;
    overflow: auto;
}

.double-width{
    width:400px;
    height: 100%;
}

the console will print "scrolling" on running the app if you move the horizontal scroll bar.

Here the key is that - the scoller directive should be in the parent not in the child div.

9
@HostListener('document:wheel', ['$event.target'])
public onWheel(targetElement) {
    console.log()
}
2
  • 6
    welcome to StackOverflow. Could you please add some explanation to your answer?
    – slfan
    Aug 22, 2019 at 19:35
  • please add some explanation for your answer, which makes it more meaningful.
    – xgqfrms
    Aug 23, 2019 at 1:58
7

Set (scroll)="yourFunction($event)" within the template at the corresponding element.

5

You could do it by the following code as well:

import { HostListener} from "@angular/core";

@HostListener("window:scroll", [])
onWindowScroll() {
 //we'll do some stuff here when the window is scrolled
}
3

For those who were still not managed to figure this out with any of above solutions, here's a running code that is tested on Angular 12

@HostListener('document:wheel', ['$event.target'])
onScroll(): void {
  console.log("Scrolling");
}
2

In angular 10 and above, when listening to window events do the following:

import { HostListener } from '@angular/core';

@HostListener('window:scroll', ['$event']) onScroll($event: Event): void {
    if($event) {
      console.log($event));
    }
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.