Angular 10中如何在横向滚动条触底时调用函数？

核心判断逻辑 #

横向滚动触底的关键判断条件是：容器的已滚动水平距离加上可视宽度，大于等于内容总宽度（减1是为了兼容浏览器精度误差）：

container.scrollLeft + container.clientWidth >= container.scrollWidth - 1

• scrollLeft：容器已向左滚动的像素距离
• clientWidth：容器的可视宽度（不含滚动条宽度）
• scrollWidth：容器内所有内容的总宽度（包含超出可视区域的部分）

Angular 具体实现步骤 #

1. 模板绑定滚动容器与事件 #

给横向滚动容器添加模板引用变量，并绑定scroll事件：

<div #scrollContainer class="horizontal-scroll-list" (scroll)="onScroll(scrollContainer)">
  <div *ngFor="let item of itemList" class="list-item">
    {{ item.content }}
  </div>
</div>

2. 组件类实现触底判断与加载逻辑 #

在组件中编写onScroll方法，通过传入的容器元素判断是否触底，触发加载：

export class YourComponent {
  itemList = []; // 初始列表数据

  onScroll(container: HTMLElement) {
    // 判定触底
    if (container.scrollLeft + container.clientWidth >= container.scrollWidth - 1) {
      this.loadMoreItems();
    }
  }

  loadMoreItems() {
    // 替换为实际加载逻辑，比如请求后端接口
    // 示例：模拟生成新数据
    const newItems = Array.from({ length: 8 }, (_, idx) => ({
      content: `新条目 ${this.itemList.length + idx + 1}`
    }));
    this.itemList = [...this.itemList, ...newItems];
  }
}

3. 处理初始内容不足的情况 #

如果初始内容不足以撑出滚动条，scroll事件不会触发，可在组件初始化后做兜底判断：

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

export class YourComponent implements AfterViewInit {
  @ViewChild('scrollContainer') scrollContainer!: ElementRef<HTMLElement>;
  itemList = [];

  ngAfterViewInit() {
    const container = this.scrollContainer.nativeElement;
    // 初始化时检查是否已触底
    if (container.scrollLeft + container.clientWidth >= container.scrollWidth - 1) {
      this.loadMoreItems();
    }
  }

  // ... 其他方法同上
}

配套样式示例 #

给滚动容器添加横向滚动的基础样式：

.horizontal-scroll-list {
  display: flex;
  overflow-x: auto;
  width: 100%;
  padding: 8px 0;
}

.list-item {
  min-width: 220px;
  height: 140px;
  margin-right: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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