嘿，你遇到的这个问题其实是mousewheel事件的局限性导致的——它只对鼠标滚轮滚动有反应，而拖拽滚动条、用键盘方向键滚动这些操作根本不会触发它，所以才会出现滚动条到底部箭头变灰，却没加载新数据的情况。下面是具体的解决思路和代码示例：

一、先换对监听的事件 #

把原来的mousewheel替换成更全面的事件组合：标准的wheel事件（覆盖鼠标滚轮）+ scroll事件（覆盖拖拽滚动条、键盘、触摸等所有滚动场景）。修改你的指令代码：

@HostListener('scroll', ['$event.target'])
@HostListener('wheel', ['$event'])
onScrollTrigger(scrollContainer: HTMLElement) {
  this.checkScrollBounds(scrollContainer);
}

二、精准判断滚动位置 #

接下来要写一个方法，计算滚动容器的关键参数，判断是否到达顶部或底部（预留一点点误差值，避免浏览器渲染的微小差异导致不触发）：

private checkScrollBounds(container: HTMLElement) {
  const viewportHeight = container.clientHeight; // 容器可视区域高度
  const totalContentHeight = container.scrollHeight; // 容器内所有内容的总高度
  const currentScrollTop = container.scrollTop; // 当前滚动距离顶部的距离

  // 判断是否到底部（留10px的缓冲，避免因浏览器 rounding 问题漏触发）
  const hitBottom = currentScrollTop + viewportHeight >= totalContentHeight - 10;
  // 判断是否到顶部
  const hitTop = currentScrollTop <= 10;

  if (hitBottom) {
    this.loadNextPage();
  } else if (hitTop) {
    this.loadPrevPage();
  }
}

三、一定要加节流控制 #

scroll和wheel事件会高频触发，如果不加节流，可能会一次性发送多个请求，导致数据混乱或者性能问题。给加载逻辑加个简单的节流：

private isLoading = false;
private throttleGap = 300; // 300ms内只允许一次加载
private lastLoadTimestamp = 0;

private loadNextPage() {
  const now = Date.now();
  if (!this.isLoading && now - this.lastLoadTimestamp > this.throttleGap) {
    this.isLoading = true;
    this.lastLoadTimestamp = now;

    // 调用你的数据加载接口
    this.dataService.fetchNextPage(25).subscribe({
      next: (newItems) => {
        // 更新DOM：移除最老的25条，加入新的25条
        this.listItems = [...this.listItems.slice(25), ...newItems];
        this.isLoading = false;

        // 加载后微调滚动位置，避免滚动条突然跳变（提升体验）
        // 如果没法预估项高度，可以用scrollBy小幅度调整，或者保持当前位置
        container.scrollTop = container.scrollTop - 50; // 示例值，根据实际情况调整
      },
      error: () => {
        this.isLoading = false; // 出错也要重置状态
      }
    });
  }
}

四、处理滚动条状态异常的小技巧 #

有时候加载完新数据，浏览器可能没及时更新滚动条状态，导致箭头还是灰色。可以手动触发一次容器重绘来解决：

// 加载完数据后执行
container.style.display = 'none';
void container.offsetHeight; // 触发重绘
container.style.display = '';

另外，你提到因为项高度不一致所以不用虚拟滚动，这个选择非常合理——虚拟滚动确实依赖固定或可预估的项高度来计算视口元素，高度参差不齐的话很容易出现定位偏差，反而破坏体验，你现在“始终保留50条DOM”的方案完全适配你的场景。

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