Angular Window Scroll Event Example

In this article we will cover on how to implement how to handle window scroll event in angular. we will help you to give example of angular window scroll event example. i would like to share with you angular get window scroll event. i explained simply step by step window scroll event in angular.

Sometime, we need to trigger window scroll event in angular application. so i will help you how to get easily trigger window scroll event in your angular app. you can also use this example in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 application.

In this example i simply call window event listener on ng oninit method and remove on ng destroy method. i created scrollEvent() method to call on scroll. so let's see full example that will help you to getting simple solution:

Example:

src/app/app.component.ts

import { Component, VERSION, OnInit } from '@angular/core';
   
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;
   
  ngOnInit() {
    window.addEventListener('scroll', this.scrollEvent, true);
  }
  
  ngOnDestroy() {
    window.removeEventListener('scroll', this.scrollEvent, true);
  }
   
  scrollEvent = (event): void => {
    const scrollTopVal = event.target.scrollingElement.scrollTop;
    console.log(scrollTopVal);
  }
}

src/app/app.component.html

<h1>Angular Window Scroll Event Example - ItSolutionStuff.com</h1>
  
<p>Lorem ipsum dolor sit amet, architecto at diam, commodo duis, pellentesque erat dis, taciti orci proin porta tellus in, at eget viverra. Quis urna magna at, eu dictum libero, in tellus velit eu elit, nulla risus felis ac habitant wisi mus, lectus semper sit elementum. Eleifend libero, viverra ligula torquent donec fringilla aliquam, quisque ut morbi, scelerisque cum dictum dis aliquam neque. A nec vel, volutpat gravida rutrum vel massa diam, odio mauris. Integer quisque suscipit ac, vitae ante volutpat, risus ut nisl massa.
Proin molestie amet duis non sit, pede justo, quisque ac nam lorem molestie metus proin. Eu dolor magnis elit duis etiam, donec scelerisque in quam tempor mauris, viverra sit augue odio, venenatis ut, lacus volutpat feugiat eu maecenas aenean elit. Pellentesque sapien justo ligula. Ut nunc sit cursus duis eleifend, proin arcu non mauris fermentum risus, morbi tellus. Nullam id et et urna, iaculis consectetuer lorem libero eleifend.
Pellentesque duis porttitor auctor magna morbi, tincidunt molestie a dolor nunc donec lectus. Tellus erat suscipit mattis sodales in cum. Interdum varius risus, morbi netus temporibus, aliquet erat dui sed lorem magnis interdum, amet at luctus netus. Fringilla risus est eget felis, commodo aliquam, wisi integer dui per ornare duis, nec id nonummy dolor nulla. Nisl id dignissim, eu nonummy dui, euismod nunc lobortis felis at orci.
Ac vulputate imperdiet diam nam quam elit, pulvinar purus sem mus accumsan nam, et malesuada lacinia eros donec sodales, pulvinar integer in nulla integer. Sodales a condimentum commodo erat, soluta sapien, arcu quam, varius pellentesque in. Erat et tempus, montes turpis sed convallis eu nisl, odio in, ante lacus. Ullamcorper felis, mauris magnam magna suscipit condimentum. Eros nunc dictum, praesent ornare mauris, vestibulum nullam leo aenean nulla in dolor, sed nec sapien nibh et, viverra et.
Nulla massa, massa quis quis faucibus et. Et ipsum aliquam lectus vitae vulputate. Pede penatibus lorem erat malesuada non, id a velit in curabitur, eros elit gravida vestibulum sem. Neque amet tempor massa sed, vitae erat phasellus et dignissim. Libero leo. Pellentesque eu mauris vitae ullamcorper ante wisi, lectus sagittis vitae. Leo a. Ullamcorper etiam nunc vel ante, proin pulvinar justo, ipsum dictum, laoreet tristique nisl elit massa maecenas in. Sapien sem viverra id molestie, id consectetuer ante ultricies ut vel integer, arcu nunc suspendisse ut, 
volutpat interdum, iaculis dolor tempus. Neque at vestibulum nisl, eros massa porttitor accumsan neque, mi at nulla sed sed pede vel, non eros mollis lorem ut, tincidunt aptent blandit aenean arcu quam. Vitae justo sed adipiscing quis volutpat lectus, scelerisque curabitur sit quis ut, nec ipsum fusce, fringilla mauris, nesciunt quis sociosqu fringilla bibendum.
Ipsum donec lobortis ut a, est amet at id. Sagittis massa consequat mauris at ultricies lobortis. Vestibulum dolor lacus adipiscing eu massa ligula, amet justo hendrerit ipsum eu a, aut arcu taciti. Massa id, pede urna, id pede, luctus aliquet rhoncus lacus vel duis rutrum, nunc in. Fringilla magna lacus proin dolor, eu nunc imperdiet, mi orci, at leo commodo. Orci lorem interdum ac elit metus.
Urna commodo. Ante nibh quod lorem, nunc dolor aliquam laoreet feugiat, sodales molestie. Nullam tellus magna augue suspendisse fermentum. Posuere erat, enim aliquam dolor. Magna justo justo vitae, donec fermentum, nascetur vestibulum proin vestibulum tortor adipiscing, faucibus condimentum ultrices pellentesque sed arcu, amet ligula dictumst. Urna pretium arcu elementum. Id nunc quam pretium, fusce eros. Eros odio placerat ipsum massa aliquet, elit justo at urna sunt.
Phasellus phasellus a fusce sed natoque egestas, maecenas dolor eu ultrices erat libero. Risus sem, adipiscing tellus scelerisque in nibh consectetuer, varius amet praesent aliquet, duis urna quisque sit turpis. Sem vivamus praesent, risus odio massa, semper mauris nibh vestibulum arcu nullam, risus massa lectus tortor euismod vel. Ipsum id. Aliquam tincidunt cras porta porta odio et, velit non dolor lacinia blandit. Sodales maecenas.
Pede integer fringilla enim imperdiet, at sem, sed lectus sapien, laoreet nostra rutrum massa. Ultrices sed nunc justo amet, ut mattis venenatis pretium blandit, magna duis facilisis. Consequat accumsan nec auctor quisque, sed neque. Tortor dis purus eu beatae, suspendisse pharetra, non bibendum quis amet. Quisque velit penatibus, sed non lacus viverra. Erat habitant urna nunc, nostrum et massa, dolor imperdiet nullam risus. Ligula suspendisse mauris dui commodo. Fermentum nonummy lorem praesent, vel eget donec a auctor, tortor 
dictumst libero, vestibulum mauris eleifend feugiat cursus, morbi curabitur quis tellus dolor orci. Suscipit quis sit, purus egestas aliquam eget sed vivamus, ut praesent dapibus sit consectetuer erat pellentesque, laoreet vitae dui id fringilla hendrerit risus. Vitae posuere penatibus dui.
Elit vivamus id commodo. Pulvinar eu nulla fringilla mattis, vitae libero justo nec, ante commodi cras wisi sed phasellus elementum, ut arcu lacinia, aptent arcu tellus. Ante magna, libero rutrum. Urna fusce urna. Vehicula magna, ut tortor cras eros, dictum nec, et dolor egestas tortor integer leo montes. Imperdiet mi malesuada, at sit quam diam. Elit integer ultrices, qui dolore laoreet pellentesque urna phasellus, nunc ligula sed nibh eget.</p>

Now you can run and check it.

I hope it can help you...