Angular class change on scroll

Question

Angular class change on scroll

HTML

<ion-app>
  <ion-content>
    <div #scrolledToElement class="second-block" [ngClass]="flag ? 'red' : 'green' "></div>
  </ion-content>
</ion-app>

CSS

.second-block {
  margin-bottom: 500px;
  height: 250px;
  width: 100%;
}
.red {
  background: red;
}
.green {
  background: green;
}

TS

import { Component, VERSION, HostListener, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Ionic 6.2 Angular ' + VERSION.major;

  constructor() {}

  flag = false;
  @ViewChild("scrolledToElement", { static: false })
  scrolledToElement: ElementRef;
  @HostListener("window:scroll", ["$event"])
  onScroll(event) {
    if (window.scrollY > this.scrolledToElement.nativeElement.offsetTop) {
      this.flag = true;
      console.log("flag", this.flag);
    }
    else
    {
      this.flag = false;
    }
  }
}

How to change the class on scroll? I am looking for a solution for the most recent Angular version stackblitz : https://stackblitz.com/edit/ionic6-angular13-wsjtit?file=src%2Fapp%2Fapp.component.html

Any suggestions, please?

Functional URL : https://stackblitz.com/edit/angular-ivy-xhb4yw?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.css,src%2Findex.html,src%2Fapp%2Fhello.component.ts,src%2Fapp%2Fapp.module.ts

html css angular typescript ionic-framework

Answer 1

Answer №1

@HostListener('window:scroll', ['$event']) is functioning well in the web browser. However, when working with Ionic, it is recommended to utilize the custom events specified in the ion-content documentation.

  <ion-content [scrollEvents]="true"
  (ionScrollStart)="logScrollStart($event)"
       (ionScroll)="logScrolling($event)" 
       (ionScrollEnd)="logScrollEnd($event)">
       
       
       
  </ion-content>

Implement the above methods in your app.component.ts file. You can establish your class change logic in the logScrolling method. Instead of using window.scrollY, utilize event.detail.scrollTop from the event provided by ionScroll.

logScrollStart(event) {
    console.log("logScrollStart : When Scroll Starts", event);
 }

 logScrolling(event) {
    console.log("logScrolling : When Scrolling", window.scrollY);
    console.log("Offset", this.scrolledToElement.nativeElement.offsetTop);
    if (event.detail.scrollTop > this.scrolledToElement.nativeElement.offsetTop) {
      this.flag = true;
      console.log('flag', this.flag);
    } else {
      this.flag = false;
    }
 }

 logScrollEnd(event) {
    console.log("logScrollEnd : When Scroll Ends", event);
 }

For reference, here is the forked stackblitz repository.

Answer 2

@HostListener('window:scroll', ['$event']) is functioning well in the web browser. However, when working with Ionic, it is recommended to utilize the custom events specified in the ion-content documentation.

  <ion-content [scrollEvents]="true"
  (ionScrollStart)="logScrollStart($event)"
       (ionScroll)="logScrolling($event)" 
       (ionScrollEnd)="logScrollEnd($event)">
       
       
       
  </ion-content>

Implement the above methods in your app.component.ts file. You can establish your class change logic in the logScrolling method. Instead of using window.scrollY, utilize event.detail.scrollTop from the event provided by ionScroll.

logScrollStart(event) {
    console.log("logScrollStart : When Scroll Starts", event);
 }

 logScrolling(event) {
    console.log("logScrolling : When Scrolling", window.scrollY);
    console.log("Offset", this.scrolledToElement.nativeElement.offsetTop);
    if (event.detail.scrollTop > this.scrolledToElement.nativeElement.offsetTop) {
      this.flag = true;
      console.log('flag', this.flag);
    } else {
      this.flag = false;
    }
 }

 logScrollEnd(event) {
    console.log("logScrollEnd : When Scroll Ends", event);
 }

For reference, here is the forked stackblitz repository.

Angular class change on scroll

Answer №1

Similar questions

What is the process for linking HTML files to a Node.js/Express server backend?

The animations in fontawesome 6.2 are completely ineffective

Placeholder variable not specified in radio buttons

The Angular material datepicker fails to organize items in a horizontal row

How can we eliminate all elements from jQuery except for the first and second elements?

Utilizing Router Outlet in Angular to Access API Data

GZIP compression causes a total page layout malfunction

Whenever I attempt to launch the application on my device, an error message stating "plugin_Not_Installed Exception" occurs

Searching for mobile WiFi preferences through a web browserHere are the steps to

Utilizing local images in Angular with route navigation

What could be causing the availability of a response in a service, but showing as undefined in the component?

A Typescript interface designed for a higher-order function that returns another function

Angular 2 - Component Loading Screen

Tips for transferring variable amounts using PaymentIntent

Does anyone know of a tool that allows you to save HTML as a standalone page?

Tips for defining conditions within the style attribute in JSP

Issue with TypeScript: Assigning type 'type' to 'IntrinsicAttributes & type & { children?: ReactNode; }' is not allowed. What is the solution?

Creating a String Array and linking it to an Input Field

Applying styled numbering to elements using nth-child selector in

The issue persists with Angular's overflow hidden not functioning properly, and similarly, the show password button is