Angular - tracking the window scroll event to target a specific scrollbar on a page with multiple scrollbars

Question

Angular - tracking the window scroll event to target a specific scrollbar on a page with multiple scrollbars

I am facing difficulty in accessing a specific scrollbar from a component in my web page. The page contains multiple scrollbars, and I need to target and modify the position of a particular scrollbar (scrollTop).

I have tried implementing the following code in the child component to display a single scrollbar in a div (refer to the screenshot below):

@HostListener('window:scroll', ['$event']) onScrollEvent($event: any) {
    console.log(window.pageYOffset);
}

However, I noticed that this event is only triggered when I adjust the scrollbar in the parent component.

Link to Screenshot

angular typescript scroll scrollbar

Answer 1

Answer №1

Each individual element has its own scroll event to trigger and respond to. When you listen to the window scroll event, you are specifically listening to the window's scroll event and not that of a particular element.

To access the scrollTop of an element in Angular, you can obtain the DOM element by referencing it using the @ViewChild() decorator like this:

First, you need to assign a template variable to the element to give it an Angular identifier

<div #scrollElement style="overflow-y=scroll"></div>

In your component, you can refer to your scroll element like this:

@ViewChild('scrollElement', {use: ElementRef}) private childEl: ElementRef;

Then, you can access and modify the scrollTop property in your method like so:

setScrollTop() {
  this.childEl.navtiveElement.scrollTop = 50;
}

Here is a Stackblitz showcasing an example

Answer 2

Each individual element has its own scroll event to trigger and respond to. When you listen to the window scroll event, you are specifically listening to the window's scroll event and not that of a particular element.

To access the scrollTop of an element in Angular, you can obtain the DOM element by referencing it using the @ViewChild() decorator like this:

First, you need to assign a template variable to the element to give it an Angular identifier

<div #scrollElement style="overflow-y=scroll"></div>

In your component, you can refer to your scroll element like this:

@ViewChild('scrollElement', {use: ElementRef}) private childEl: ElementRef;

Then, you can access and modify the scrollTop property in your method like so:

setScrollTop() {
  this.childEl.navtiveElement.scrollTop = 50;
}

Here is a Stackblitz showcasing an example

Angular - tracking the window scroll event to target a specific scrollbar on a page with multiple scrollbars

Answer №1

Similar questions

Obtaining Input Field Value in Angular Using Code

Issue with PassportJS and Express 4 failing to properly store cookies/session data

Retrieving data from a nested JSON array using AngularJS

When attempting to open a form in edit mode, data binding fails to work across multiple form controls

Unable to apply styling to table cells that are dynamically added using JQuery within an Angular

What is the best way to pass a string array in a post request using HttpClient in Angular 14?

Creating autorest client based on various OpenAPI versions

Create a series of buttons in Angular 2 that are linked to components with a click event

Encountering an obscure issue when using Discord.js v14 after attempting to cancel and resubmit a modal

Angular 4 Issue: Child Routing Dysfunction

Guide on integrating a dynamic element within another element in Angular

Experiencing an Issue with NGINX Loading Vue 3 Vite SPA as a Blank White Page

Instructions on how to implement a readmore button for texts that exceed a specific character length

Function that wraps JSX elements with the ability to infer types through generics

Transform a nested AngularJS service into an Angular Observable service

Angular not firing slide.bs.carousel or slid.bs.carousel event for Bootstrap carousel

Creating a Prisma schema with a complex nested structure and incorporating an array of strings for a specific property

Resolving search box setup problem in PrimeNG dataView

Following an Angular update, the npm installation process encounters issues due to conflicts related to peer dependencies

What is the best way to transfer two distinct states from my ngrx effect to my service function?