如何处理Angular上的上下滚动事件？

import { Component, OnInit, Renderer2, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit() {
    this.renderer.listen(this.el.nativeElement, 'window:scroll', (event) => {
      this.handleScroll(event);
    });
  }

  handleScroll(event: any) {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    console.log('Scroll position:', scrollTop);

    // 根据滚动位置执行相应逻辑
    if (scrollTop > 100) {
      // 滚动超过100px时的逻辑
    }
  }
}

import { Component, OnInit, Renderer2, ElementRef } from '@angular/core';

@Component({
  selector: 'app-scrollable',
  template: `<div class="scrollable" #scrollableElement>
               <!-- 滚动内容 -->
             </div>`
})
export class ScrollableComponent implements OnInit {
  @ViewChild('scrollableElement') scrollableElement: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngOnInit() {
    this.renderer.listen(this.scrollableElement.nativeElement, 'scroll', (event) => {
      this.handleScroll(event);
    });
  }

  handleScroll(event: any) {
    const scrollTop = event.target.scrollTop;
    console.log('Scroll position:', scrollTop);

    // 根据滚动位置执行相应逻辑
    if (scrollTop > 100) {
      // 滚动超过100px时的逻辑
    }
  }
}

import { throttle } from 'lodash';

// 在ngOnInit中使用throttle
this.renderer.listen(this.el.nativeElement, 'window:scroll', throttle((event) => {
  this.handleScroll(event);
}, 100));

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

@Component({
  selector: 'app-scrollable',
  template: `<div class="scrollable" #scrollableElement>
               <!-- 滚动内容 -->
             </div>`
})
export class ScrollableComponent implements AfterViewInit {
  @ViewChild('scrollableElement') scrollableElement: ElementRef;

  ngAfterViewInit() {
    this.renderer.listen(this.scrollableElement.nativeElement, 'scroll', (event) => {
      this.handleScroll(event);
    });
  }

  handleScroll(event: any) {
    // 处理滚动事件
  }
}