如何使用RxJs实现滚动值的边界自动修正（固定限制）

修改后的组件TS代码 #

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';
import { DataService } from './data.service';
import { Post } from './post.model';

export class GridComponent implements OnInit {

  public dataSource: Post[] = [];
  public displayedColumns: string[] = ['id', 'title', 'body'];

  @ViewChild('content', { static: true }) content: ElementRef<HTMLElement>;

  constructor(private service: DataService) { }

  ngOnInit(): void {
    this.getAllPosts();
    this.initScrollRestriction();
    // 初始强制设置scrollTop为2，覆盖默认的0
    this.content.nativeElement.scrollTop = 2;
  }

  getAllPosts() {
    this.service.getData().subscribe(data => {
      this.dataSource = data;
      // 数据加载后DOM更新完成，修正滚动位置（避免内容高度变化导致超出限制）
      setTimeout(() => {
        const currentScroll = this.content.nativeElement.scrollTop;
        const maxScroll = this.getMaxScrollTop();
        this.content.nativeElement.scrollTop = Math.max(2, Math.min(currentScroll, maxScroll - 2));
      }, 0);
    });
  }

  private initScrollRestriction() {
    fromEvent(this.content.nativeElement, 'scroll').pipe(
      map(() => this.content.nativeElement.scrollTop)
    ).subscribe(currentScroll => {
      const maxScroll = this.getMaxScrollTop();
      let targetScroll = currentScroll;

      // 修正下限：低于2时强制设为2
      if (currentScroll < 2) {
        targetScroll = 2;
      }
      // 修正上限：超过最大值减2时，强制设为最大值减2
      else if (currentScroll > maxScroll - 2) {
        targetScroll = maxScroll - 2;
      }

      // 仅在需要修正时设置，避免触发循环scroll事件
      if (targetScroll !== currentScroll) {
        this.content.nativeElement.scrollTop = targetScroll;
      }
    });
  }

  private getMaxScrollTop(): number {
    const element = this.content.nativeElement;
    // 计算容器可滚动的最大scrollTop值：总高度 - 可视高度
    return element.scrollHeight - element.clientHeight;
  }
}

关键逻辑说明 #

• 初始位置修正：组件初始化时直接将scrollTop设为2，解决初始值为0的问题。
• 动态计算最大滚动值：通过scrollHeight - clientHeight实时获取容器的最大可滚动距离，适配表格内容变化后的高度。
• 滚动边界拦截：在scroll事件中判断当前滚动位置，超出范围时强制修正，且仅在需要改动时设置scrollTop，避免循环触发事件。
• 数据加载后适配：数据渲染完成后，重新校准滚动位置，防止内容高度变化导致滚动值超出限制。

必要样式补充 #

确保滚动容器有固定高度和滚动属性，否则scroll事件不会触发：

.content {
  height: 400px; /* 根据需求设置合适高度 */
  overflow-y: auto;
}

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