Angular 4中如何检测元素的水平滚动

嗨，我来帮你搞定这个问题！你现在用@HostListener监听窗口滚动没问题，但要针对单个嵌套在容器里的div的滚动事件，其实用Angular的@ViewChild就能轻松实现，下面给你两种常用的方案：

方案一：监听子元素的滚动（适配你的场景） #

这种方法适用于滚动div是组件模板里的子元素的情况：

1. 第一步：给滚动div添加模板引用变量
   在你的组件模板里，给需要监听的滚动div加上#scrollableDiv这样的模板引用：

<div class="container">
  <!-- 给滚动div加模板引用变量 -->
  <div #scrollableDiv class="scrollable-content">
    <!-- 这里放你的滚动内容 -->
  </div>
</div>

2. 第二步：在组件类中获取元素并添加监听
   通过@ViewChild获取这个元素的引用，然后在视图初始化完成后添加滚动事件监听，同时记得在组件销毁时移除监听避免内存泄漏：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit, OnDestroy {
  // 获取模板引用的元素
  @ViewChild('scrollableDiv') scrollableDiv!: ElementRef;
  // 保存监听函数的引用，方便后续移除
  private scrollListener!: () => void;

  ngAfterViewInit(): void {
    // 定义监听函数
    this.scrollListener = () => this.onElementScroll();
    // 给元素添加滚动监听
    this.scrollableDiv.nativeElement.addEventListener('scroll', this.scrollListener);
  }

  // 滚动事件触发时的处理逻辑
  onElementScroll(): void {
    const scrollEl = this.scrollableDiv.nativeElement;
    // 获取水平滚动偏移量（你需要的左右滚动对应scrollLeft）
    const horizontalOffset = scrollEl.scrollLeft;
    // 如果元素也支持垂直滚动，也可以获取scrollTop
    const verticalOffset = scrollEl.scrollTop;

    console.log('元素正在滚动，水平偏移量:', horizontalOffset);
    console.log('垂直偏移量:', verticalOffset);
  }

  // 组件销毁时移除监听，防止内存泄漏
  ngOnDestroy(): void {
    if (this.scrollableDiv && this.scrollListener) {
      this.scrollableDiv.nativeElement.removeEventListener('scroll', this.scrollListener);
    }
  }
}

方案二：监听组件宿主元素的滚动 #

如果你的组件本身就是那个可滚动的div（也就是组件的宿主元素），那可以直接用@HostListener监听scroll事件，不用额外获取元素：

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

@Component({
  selector: 'app-scrollable-component',
  template: `<!-- 组件内容 -->`,
  styles: [`:host { display: block; overflow-x: auto; }`]
})
export class ScrollableComponent {
  constructor(private el: ElementRef) {}

  // 直接监听宿主元素的scroll事件
  @HostListener('scroll', [])
  onHostScroll(): void {
    const horizontalOffset = this.el.nativeElement.scrollLeft;
    console.log('宿主元素滚动中，水平偏移:', horizontalOffset);
  }
}

简单总结一下，你的场景更适合用方案一，因为滚动div是嵌套在容器里的子元素，通过模板引用+@ViewChild就能精准监听它的滚动事件啦。

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