Window scroll event using @HostListener not working

Question

I have problem making sticky header when scrolling down, in an Angular 4 application. Scroll event can't be detected.

Header is placed in the layout component, and the content I want to be scrolling is placed in routes component. May that be the problem?

This is the code I implemented.

In layout.component.ts

import { Component, OnInit, HostListener, Inject } from '@angular/core';

import { DOCUMENT } from "@angular/platform-browser";

@Component({

  selector: 'app-layout',

  templateUrl: './layout.component.html',

  styleUrls: ['./layout.component.css']
})

export class LayoutComponent implements OnInit {

  public navIsFixed: boolean = false;

  constructor(public router: Router, @Inject(DOCUMENT) private document: any) { }

  @HostListener('window:scroll', [ ])

    onWindowScroll(){
      const number = window.pageYOffset || 
      document.documentElement.scrollTop || 
      document.body.scrollTop || 0;
      if (number > 50) {
        this.navIsFixed = true;
      } else if (this.navIsFixed && number < 10) {
      this.navIsFixed = false;
      }
    }
}

In layout.component.html

<div [class.fixed]="navIsFixed" class="header">

What if you define it in the top-level component? app.component.ts (i assume your router-outlet is there...) — Carsten, Aug 29 '17 at 11:25
@natdico please see the answer above, the main component must have the overflow property. Note : don't try to add this property with DevTools, in that case that would not work — Smaillns, Dec 11 '19 at 11:11

Zahema · Answer 1 · 2020-05-13T17:28:36.177

8

I just had the same problem, all what I had to do was to make sure that the component element is actually what is scrolling & that it has a overflow property with values scroll or auto.

Otherwise just this worked:

@HostListener('scroll')
  public asd(): void {
  console.log('scrolling');
}

edited May 13 '20 at 17:28

answered Jun 10 '18 at 20:35

Zahema

1,345
2
19
35

2

"make sure component has a overflow property with values scroll or auto" solved my problem – KLMN Oct 19 '18 at 02:05

Vega · Answer 2 · 2020-11-04T02:51:54.063

4

Your layout must be the source of the issue. The scroll event works only when the the component template element can actually scroll.

Make sure the div has overflow property set to scroll. Also, change the div dimensions so the scroll could trigger.

In order to make it work, I would suggest to make it to the directive and set to a div that has 100vh in height and 100vw in width.

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

@Directive({ selector: '[trackScroll]' })
export class TrackScrollDirective {
    constructor(private el: ElementRef) {
    }

    @HostListener('document:scroll', [])
    onScroll(): void {
         console.log('I am scrolled');
    }
}

See this stackblitz that I made.

edited Nov 04 '20 at 02:51

answered Aug 30 '17 at 21:26

Vega

27,856
27
95
103

@tolceza you should accept this answer as a solution! – Dmitry Grinko Oct 11 '19 at 19:52
1

`Your layout must be the source of the issue`. Can you elaborate what this means? If I can't give `height` and `width` as `100vw` how can I track if scroll action is performed on component? – rainversion_3 Nov 07 '19 at 14:32
@rainversion_3, I wasn't clear there for sure. Does the div have overflow:scroll on it? You don't need the full width and height for the scroll to work – Vega Nov 07 '19 at 15:50

score 3 · Answer 3 · answered Aug 29 '17 at 11:50

3

This should give you scroll events:

@HostListener('scroll', ['$event'])
onScroll(event) {
  ...
}

or

<div (scroll)="onScroll($event)"

answered Aug 29 '17 at 11:50

Carsten

4,005
21
28

Thanks but it is not even detecting the scroll event. – tolceza Aug 29 '17 at 12:10
1

Works on Chrome, not on Firefox. – user2340939 May 25 '18 at 11:44
@Carsten this gives Maximum call stack size exceeded error – Himanshu Shekhar Aug 28 '18 at 06:47

jacek · Answer 4 · 2021-06-26T07:24:35.803

0

I have the same issue, I added this to "nav.component":

@HostListener('window:scroll', [])
onWindowScroll() {
    console.log(window.scrollY);

    if (window.scrollY > 90) {
        this.isSticky = true;
    } else {
        this.isSticky = false;
    }
}

edited Jun 26 '21 at 07:24

answered Jun 25 '21 at 14:57

jacek

311
3
8

score 0 · Answer 5 · answered Apr 19 '23 at 15:30

0

Could not make it work with scroll but with wheel:

@HostListener('window:wheel', ['$event'])
onWheel(event: MouseEvent) {
  // do what you want here
}

answered Apr 19 '23 at 15:30

burkay

1,075
1
10
20

score 0 · Answer 6 · answered Jul 06 '23 at 23:09

In my case, the issue was a simple overflow-x: hidden placed on the <html> scope. Removing and replacing it right under, on the <body> scope, fixed the problem, while keeping my overflow configuration.

Every component can detect scroll events, regardless of hierarchy. There is no need to worry about parent/child relations.

Window scroll event using @HostListener not working

6 Answers6