Troubleshooting: @HostListener for window scroll event not functioning as expected

Question

Troubleshooting: @HostListener for window scroll event not functioning as expected

Having trouble creating a sticky header that stays fixed when scrolling down in an Angular 4 application. The scroll event is not being detected.

The header is located in the layout component, while the content I want to be scrollable is placed in the routes component. Could this arrangement be causing the issue?

Here is the implemented code:

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">

angular typescript scroll header sticky

Answer 1

Answer №1

I encountered a similar issue recently, but I found a solution by ensuring that the component element is the one actually scrolling and that it has an overflow property set to either scroll or auto.

If not, you can try the following code snippet:

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

Answer 2

I encountered a similar issue recently, but I found a solution by ensuring that the component element is the one actually scrolling and that it has an overflow property set to either scroll or auto.

If not, you can try the following code snippet:

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

Answer 3

Answer №2

It seems like the issue lies within your layout setup. The scroll event will only work if the component template element is able to scroll.

Make sure to set the overflow property of the div to scroll and adjust the dimensions of the div so that scrolling can be triggered.

To address this issue, I recommend creating a directive and applying it to a div with 100vh in height and 100vw in width for optimal functionality.

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

Check out this stackblitz example that I put together.

Answer 4

It seems like the issue lies within your layout setup. The scroll event will only work if the component template element is able to scroll.

Make sure to set the overflow property of the div to scroll and adjust the dimensions of the div so that scrolling can be triggered.

To address this issue, I recommend creating a directive and applying it to a div with 100vh in height and 100vw in width for optimal functionality.

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

Check out this stackblitz example that I put together.

Answer 5

Answer №3

Here are some ways to capture scroll events:

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

or

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

Answer 6

Here are some ways to capture scroll events:

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

or

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

Answer 7

Answer №4

Dealing with a similar problem, I made the following addition to "nav.component":

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

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

Answer 8

Dealing with a similar problem, I made the following addition to "nav.component":

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

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

Answer 9

Answer №5

Was unable to get it functioning using the scroll event, but found success with the wheel event:

@HostListener('window:wheel', ['$event'])
onWheel(event: MouseEvent) {
  // customize your actions here
}

Answer 10

Was unable to get it functioning using the scroll event, but found success with the wheel event:

@HostListener('window:wheel', ['$event'])
onWheel(event: MouseEvent) {
  // customize your actions here
}

Answer 11

Answer №6

The problem I encountered was due to a straightforward overflow-x: hidden style set on the <html> element. By moving this style to the <body> element, I was able to resolve the issue without altering my overflow settings.

Scroll events can be detected by any component, independent of their hierarchical relationship. Parent/child relations do not have an impact on this functionality.

Answer 12

The problem I encountered was due to a straightforward overflow-x: hidden style set on the <html> element. By moving this style to the <body> element, I was able to resolve the issue without altering my overflow settings.

Scroll events can be detected by any component, independent of their hierarchical relationship. Parent/child relations do not have an impact on this functionality.

Troubleshooting: @HostListener for window scroll event not functioning as expected

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Angular: efficient exchange of information among components

Compilation of Zod record with predefined keys

after ajax post, enhance original object by merging with the latest server values

If an interface property is set as (), what significance does it hold?

Developing a Customized Filtering Mechanism in Angular 8

Strange compilation error encountered with ng-packagr due to Angular @Input inheritance

Is it necessary to create a wrapper for Angular Material2 components?

Child component responsible for closing the modalI will guide you through

The issue lies in attempting to assign an 'Observable<number[]>' to a parameter expecting an 'Observable<ProjectObject[]>'. This obstacle must be overcome in order to successfully create a mock service

"An error has occurred stating that the header is not defined in

No issues raised by Typescript/tslint regarding this in arrow function

In Angular 5, a variable's value becomes undefined once it is subscribed to outside of its assigned

Invoke a function within a component, within that very component

Unused Angular conditional provider found in final production bundle

The compilation of angular-cli version 25.5 encountered an error during module build

Having trouble deploying an Angular Universal app to an AWS S3 bucket with server-side rendering (SSR

Discovering if "back" and "forward" navigation are accessible using Angular's Location service

Why do I keep being told that the property doesn't exist?

Explaining the process of defining an object type in TypeScript and the conversion from JavaScript

Notify other components in Angular when a change has occurred without relying on intervals