在列表中用IntersectionObserver指令控制滚动置顶按钮显隐

核心结论 #

指令应该绑定到可滚动列表的第一项，而非「返回顶部」按钮。我们需要监听的是列表第一项的交叉可见状态，按钮只是根据该状态被控制显示/隐藏的目标元素。

代码修正与说明 #

原代码逻辑存在倒置：你需要将指令绑定到要监听的列表第一项，同时传入按钮作为待控制的元素。以下是修正后的实现：

@Directive({
  selector: '[appWatchFirstListItem]',
})
export class WatchFirstListItemDirective implements AfterViewInit {
  // 传入需要控制显示/隐藏的返回顶部按钮
  @Input() targetBackToTopBtn?: HTMLElement; 
  private observer?: IntersectionObserver;

  constructor(private el: ElementRef) {}

  ngAfterViewInit(): void {
    // 配置交叉观察者，监听第一项的可见状态
    this.observer = new IntersectionObserver(
      (entries) => {
        const isFirstItemVisible = entries[0].isIntersecting;
        // 根据第一项可见性切换按钮状态：可见则隐藏，不可见则显示
        if (isFirstItemVisible) {
          this.targetBackToTopBtn?.setAttribute('hidden', '');
        } else {
          this.targetBackToTopBtn?.removeAttribute('hidden');
        }
      },
      {
        threshold: 0.1, // 第一项只要有10%可见即判定为"可见"，可按需调整
        // 若列表在固定高度的滚动容器内，需指定root为该容器DOM元素，否则默认用页面视口
        root: document.querySelector('.scrollable-list-container') 
      }
    );

    // 监听指令绑定的元素（即列表第一项）
    this.observer.observe(this.el.nativeElement as HTMLElement);
  }

  ngOnDestroy() {
    this.observer?.disconnect();
  }
}

模板使用示例 #

<!-- 可滚动列表容器 -->
<div class="scrollable-list-container">
  <!-- 列表第一项：绑定指令并传入返回顶部按钮 -->
  <div class="list-item" [appWatchFirstListItem]="backToTopBtn">
    第一项内容
  </div>
  <!-- 其他列表项 -->
  <div class="list-item">第二项内容</div>
  <div class="list-item">第三项内容</div>
  ...
</div>

<!-- 返回顶部按钮 -->
<button #backToTopBtn hidden>返回顶部</button>

关键细节提示 #

• 滚动容器适配：如果列表是在独立的滚动容器内（而非页面整体滚动），必须指定root为该容器的DOM元素，否则观察者会以页面视口为判断基准，导致状态判定错误。
• 阈值调整：threshold参数可根据需求修改，比如设为1表示第一项完全可见时才触发隐藏按钮的逻辑。
• 语义化命名：将指令命名为appWatchFirstListItem，能更清晰地体现其监听列表第一项状态的作用。

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