Monitoring the current scroll position and updating other components on changes

Question

Monitoring the current scroll position and updating other components on changes

Is there a way to easily monitor the scroll position of the browser and inform multiple components about it?

For example, I would like to dynamically change the classes of different elements on the page as the user scrolls. In the past, with older versions of Angular and jQuery, this was achievable with the help of plugins. While it is possible to implement this functionality using vanilla JavaScript and emitting events on application start, it can be messy and inefficient.

What are some alternative solutions to tackle this problem?

UPDATE (following suggestions):

Here is my attempt at solving this:

I created a new component:

import {Component} from "angular2/core";

@Component({
    selector: '[track-scroll]',
    host: {'(window:scroll)': 'track($event)'},
    template: ''
})

export class TrackScrollComponent {
    track($event) {
        console.debug("Scroll Event", $event);
    }
}

Then I added an attribute to the main directive of my application:

<priz-app track-scroll>

Furthermore, I included the component as one of the providers in the top component:

import {TrackScrollComponent} from "../../shared/components/track-scroll.component";

@Component({
  selector: 'priz-app',
  moduleId: module.id,
  templateUrl: './app.component.html',
  directives: [ROUTER_DIRECTIVES, SecureRouterOutlet, AppHeader, TrackScrollComponent],
  providers: [AuthenticationService]
})

Unfortunately, it did not yield the expected results...

ANOTHER UPDATE:

I moved the track-scroll attribute to one of the div elements within the main template:

<div class="container-fluid" track-scroll>
    <div class="row">
        <div class="col-md-12">
            <app-header></app-header>
            <secure-outlet signin="Login" unauthorized="AccessDenied"></secure-outlet>
        </div>
    </div>
</div>

As a result, the application loads with a blank screen. Exciting times...

FINAL SOLUTION (that worked for me).

Create a directive:

import {Directive} from "angular2/core";

@Directive({
    selector: '[track-scroll]',
    host: {'(window:scroll)': 'track($event)'}
})

export class TrackScrollDirective {
    track($event: Event) {
        console.debug("Scroll Event", $event);
    }
}

Include the directive in all components that require it:

directives: [TrackScrollDirective]

Assign the attribute to each element that needs to track the event:

<div class="col-md-12" track-scroll>

angular typescript events scroll

Answer 1

Answer №1

The most straightforward method is for each interested component to listen for the scroll event.

  @Component({
    ...
    // an alternative to using `@HostListener(...)`
    // host: {'(window:scroll)': 'doSomething($event)'}
  })
  class SomeComponent {
    @HostListener('window:scroll', ['$event']) 
    doSomething(event) {
      // console.debug("Scroll Event", document.body.scrollTop);
      // refer to András Szepesházi's comment below
      console.debug("Scroll Event", window.pageYOffset );
    }
  }

View the example on Plunker

Plunker demonstrating the use of @HostListener()

Hint:

bootstrap(MyComponent, [
    provide(PLATFORM_DIRECTIVES, {useValue: [TrackScrollDirective], multi:true})]);

This makes the directive universally applicable without the need to add it to the directive: [...] list of every component.

Answer 2

The most straightforward method is for each interested component to listen for the scroll event.

  @Component({
    ...
    // an alternative to using `@HostListener(...)`
    // host: {'(window:scroll)': 'doSomething($event)'}
  })
  class SomeComponent {
    @HostListener('window:scroll', ['$event']) 
    doSomething(event) {
      // console.debug("Scroll Event", document.body.scrollTop);
      // refer to András Szepesházi's comment below
      console.debug("Scroll Event", window.pageYOffset );
    }
  }

View the example on Plunker

Plunker demonstrating the use of @HostListener()

Hint:

bootstrap(MyComponent, [
    provide(PLATFORM_DIRECTIVES, {useValue: [TrackScrollDirective], multi:true})]);

This makes the directive universally applicable without the need to add it to the directive: [...] list of every component.

Answer 3

Answer №2

I had to approach this problem in a unique way because I had to monitor multiple scrolling elements on the window. To address this, I developed a directive to track the scroll position on a specific element:

@Directive({
  selector: '[scroll]'
})
export class ScrollDirective {
  @Output() setScroll = new EventEmitter();
  private scrollPosition: number;

  constructor(private elementRef: ElementRef) { }

  @HostListener('scroll', ['$event'])
  trackScroll() { this.scrollPosition = event.srcElement.scrollTop }

  resetScroll() {  this.elementRef.nativeElement.scrollTop = this.scrollPosition }
}

Then, in any component that included a scrolling element requiring this feature, I could use @ViewChild to access the directive like so:

@Component({
  selector: 'parent',
  template: `
    <div class="container" scroll>
      // *ngFor=""...
    </div>
  `
})
export class ParentComponent implements AfterViewChecked {

  @ViewChild(ScrollDirective) scrollDirective: ScrollDirective;

  ngAfterViewChecked() {
    this.scrollDirective.resetScroll()
  }
}

Answer 4

I had to approach this problem in a unique way because I had to monitor multiple scrolling elements on the window. To address this, I developed a directive to track the scroll position on a specific element:

@Directive({
  selector: '[scroll]'
})
export class ScrollDirective {
  @Output() setScroll = new EventEmitter();
  private scrollPosition: number;

  constructor(private elementRef: ElementRef) { }

  @HostListener('scroll', ['$event'])
  trackScroll() { this.scrollPosition = event.srcElement.scrollTop }

  resetScroll() {  this.elementRef.nativeElement.scrollTop = this.scrollPosition }
}

Then, in any component that included a scrolling element requiring this feature, I could use @ViewChild to access the directive like so:

@Component({
  selector: 'parent',
  template: `
    <div class="container" scroll>
      // *ngFor=""...
    </div>
  `
})
export class ParentComponent implements AfterViewChecked {

  @ViewChild(ScrollDirective) scrollDirective: ScrollDirective;

  ngAfterViewChecked() {
    this.scrollDirective.resetScroll()
  }
}

Answer 5

Answer №3

Check out the documentation for the ScrollService in the Angular project.

The method they use to retrieve the position is fromEvent(window, 'scroll')

In a global service that you inject into your component, you can implement something similar to this:

public readonly windowScroll$ = fromEvent(window, 'scroll').pipe(map(x => window.scrollY), startWith(0), distinctUntilChanged(), shareReplay(1));

The startWith(0) is important because you may not receive a scroll event until you begin scrolling. If necessary, you can add debouncing.

Answer 6

Check out the documentation for the ScrollService in the Angular project.

The method they use to retrieve the position is fromEvent(window, 'scroll')

In a global service that you inject into your component, you can implement something similar to this:

public readonly windowScroll$ = fromEvent(window, 'scroll').pipe(map(x => window.scrollY), startWith(0), distinctUntilChanged(), shareReplay(1));

The startWith(0) is important because you may not receive a scroll event until you begin scrolling. If necessary, you can add debouncing.

Answer 7

Answer №4

I encountered a similar issue where I needed a div to scroll along with the page. I was able to resolve this challenge using the following code snippet. When working with the component that requires the scroll functionality, include the following code:

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

@ViewChild('curtain') divCurtain: ElementRef;

export class ComponentY {
    @HostListener('window:scroll', ['$event']) onScrollEvent($event) {
        console.log(window.pageYOffset);
        this.divCurtain.nativeElement.style.top = window.pageYOffset.toString().concat('px');
    }

    ngOnInit(): void { }
}

It is important to note that I solely used the HostListener without creating any additional directives or codes. This listener is triggered whenever the user scrolls the page, allowing me to retrieve the window.pageYOffset and apply it to my div element.

I hope this solution proves to be beneficial to you.

Answer 8

I encountered a similar issue where I needed a div to scroll along with the page. I was able to resolve this challenge using the following code snippet. When working with the component that requires the scroll functionality, include the following code:

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

@ViewChild('curtain') divCurtain: ElementRef;

export class ComponentY {
    @HostListener('window:scroll', ['$event']) onScrollEvent($event) {
        console.log(window.pageYOffset);
        this.divCurtain.nativeElement.style.top = window.pageYOffset.toString().concat('px');
    }

    ngOnInit(): void { }
}

It is important to note that I solely used the HostListener without creating any additional directives or codes. This listener is triggered whenever the user scrolls the page, allowing me to retrieve the window.pageYOffset and apply it to my div element.

I hope this solution proves to be beneficial to you.

Answer 9

Answer №5

When working in Angular, it is possible to monitor the scroll position within a specific div using viewchild events.

Start by adding a reference in the HTML code

<div #postion class="scroll-container">
  .......
  .......
</div>

Next, declare the reference in the TypeScript file using viewchild

@ViewChild('postion', { static: true }) _div: ElementRef;

Then, within the ngAfterViewInit function

 ngAfterViewInit() {
     fromEvent(this._div?.nativeElement, 'scroll').subscribe((e: any) =>  {
         this.scrollPosition = e?.target['scrollTop'];
            });
  }

Remember to import fromEvent from rxjs.

If you need to scroll to the saved position later on, you can use

      (this._div.nativeElement as HTMLElement).scrollTop = this.scrollPosition;

Answer 10

When working in Angular, it is possible to monitor the scroll position within a specific div using viewchild events.

Start by adding a reference in the HTML code

<div #postion class="scroll-container">
  .......
  .......
</div>

Next, declare the reference in the TypeScript file using viewchild

@ViewChild('postion', { static: true }) _div: ElementRef;

Then, within the ngAfterViewInit function

 ngAfterViewInit() {
     fromEvent(this._div?.nativeElement, 'scroll').subscribe((e: any) =>  {
         this.scrollPosition = e?.target['scrollTop'];
            });
  }

Remember to import fromEvent from rxjs.

If you need to scroll to the saved position later on, you can use

      (this._div.nativeElement as HTMLElement).scrollTop = this.scrollPosition;

Monitoring the current scroll position and updating other components on changes

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What steps should be taken to find a particular route when a user logs in for the first time?

Retrieving information from a child modal window in an Angular parent component

Enhancing Web Service Calls with Angular 2 - The Power of Chaining

Two lines in ChartJS with distinct fill gradients for each

What is the best way to bring two useStyles files into a single TypeScript file?

"Creating a visual representation of models exchanged between the client and server through Rest

Troubleshooting Angular: Investigating why a component is failing to redirect to a different route

Tips for sending data returned asynchronously from an Observable in Angular from a Child component to its Parent

Angular 15 experiences trouble with child components sending strings to parent components

NiceScroll fails to function properly following the loading of AJAX content

Error: The Select2 query service is not available

Webpack and incorporating bespoke scripts

issue encountered when implementing slick.js in angular 6

Updating an Angular 2 project for the MEAN Stack development platform

Discover the latest techniques for incorporating dynamic datalist options in Angular 13 with Bootstrap 5

How to set up npm to utilize the maven directory format and deploy war files

Angular modules are designed to repeat chunks of code in a

Issue with Vue router - Multiple calls to the "next" callback were detected within one navigation guard

Angular time-based polling with conditions

Retrieving an Observable within an Observable is a feature found in Angular 9