适配最新Angular版本的滚动切换元素类名方案咨询

实现思路 #

通过监听页面滚动事件，对比滚动距离与目标元素的偏移位置，切换布尔状态值，结合ngClass指令动态切换元素的CSS类名。

完整代码实现 #

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

TypeScript 组件逻辑

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;

  flag = false;
  @ViewChild("scrolledToElement", { static: false })
  scrolledToElement!: ElementRef;

  @HostListener("window:scroll", ["$event"])
  onScroll(event: Event) {
    const elementTop = this.scrolledToElement.nativeElement.offsetTop;
    this.flag = window.scrollY > elementTop;
  }
}

关键说明 #

1. ViewChild获取DOM元素：通过模板引用变量#scrolledToElement获取目标元素的DOM引用，用于获取其页面偏移位置。
2. 滚动事件监听：使用@HostListener监听window:scroll事件，实时获取滚动状态。
3. 动态类名切换：利用ngClass指令根据flag的布尔值，切换元素的red或green类，实现背景色变化。
4. 适配Ionic环境：如果使用Ionic框架，需注意ion-content有独立的滚动容器，若监听window:scroll不生效，可改为监听ion-content的ionScroll事件，通过事件对象获取滚动距离。

内容的提问来源于stack exchange，提问作者Siddhesh Shedge