如何为带滚动的表格实现垂直滚动触发SCSS类激活（非浏览器滚动）

完全可以通过监听表格自身的滚动事件来实现，无需依赖浏览器全局滚动事件，具体实现步骤如下：

• 绑定表格滚动容器的scroll事件
  找到表格的滚动容器（通常是设置了overflow: auto的外层div，或表格自身），在Angular模板中通过(scroll)指令绑定到组件内的处理方法。

• 编写滚动事件处理逻辑
  在组件方法中，根据滚动容器的scrollTop值判断是否激活阴影类：当垂直滚动距离大于0时，给固定列添加active-scroll-shadow；滚动到顶部时移除该类，同时保留原有水平滚动的阴影逻辑。

代码示例 #

组件模板（HTML）

<div class="table-scroll-container" (scroll)="handleTableScroll($event)">
  <table>
    <tbody>
      <tr *ngFor="let row of tableData">
        <td class="fixed-column">{{ row.fixedContent }}</td>
        <!-- 其他可滚动列 -->
        <td>{{ row.column1 }}</td>
        <td>{{ row.column2 }}</td>
        <!-- 更多列... -->
      </tr>
    </tbody>
  </table>
</div>

组件逻辑（TS）

handleTableScroll(event: Event) {
  const scrollContainer = event.target as HTMLElement;
  const fixedColumn = scrollContainer.querySelector('.fixed-column');
  
  // 垂直滚动阴影控制
  if (scrollContainer.scrollTop > 0) {
    fixedColumn?.classList.add('active-scroll-shadow');
  } else {
    fixedColumn?.classList.remove('active-scroll-shadow');
  }

  // 保留原有水平滚动阴影逻辑
  if (scrollContainer.scrollLeft > 0) {
    // 原有水平滚动时的阴影处理（比如给列右侧加阴影）
  } else {
    // 移除水平滚动阴影
  }
}

SCSS样式调整（可选）

如果需要区分水平/垂直滚动的阴影方向，可以扩展样式：

.active-scroll-shadow {
  // 水平滚动时的右侧阴影
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
  
  // 垂直滚动时叠加顶部阴影
  &.vertical-active {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 2px 0 6px rgba(0, 0, 0, 0.1);
  }
}

• 性能优化提示
  滚动事件触发频率高，可通过RxJS的防抖操作减少方法调用次数：

import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

ngOnInit() {
  const scrollContainer = document.querySelector('.table-scroll-container') as HTMLElement;
  fromEvent(scrollContainer, 'scroll')
    .pipe(debounceTime(15))
    .subscribe(event => this.handleTableScroll(event));
}

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