Angular中实现滚动时显示右侧边框的粘性首列表格

要实现粘性首列仅在水平滚动时显示右侧边框，核心思路是监听滚动容器的滚动状态，根据滚动距离动态切换边框的显示状态。以下是具体实现步骤：

1. 修改模板结构 #

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

<div #tableContainer class="table" (scroll)="onTableScroll(tableContainer)">
  <table class="sort-table">
    <thead>
      <tr>
        <th class="sticky-column col">DATA1</th>
        <th class="col">DATA2</th>
        <th class="col">DATA3</th>
        <th class="col">DATA4</th>
      </tr>
    </thead>
    <tbody>
      <tr class="row">
        <td class="sticky-column data">Some values</td>
        <td class="data">Some values</td>
        <td class="data">Some values</td>
        <td class="data">Some values</td>
      </tr>
      <tr class="row">
        <td class="sticky-column data">Some values</td>
        <td class="data">Some values</td>
        <td class="data">Some values</td>
        <td class="data">Some values</td>
      </tr>
      <tr class="row">
        <td class="sticky-column data">Some values</td>
        <td class="data">Some values</td>
        <td class="data">Some values</td>
        <td class="data">Some values</td>
      </tr>
      <tr class="row">
        <td class="sticky-column data">Some values</td>
        <td class="data">Some values</td>
        <td class="data">Some values</td>
        <td class="data">Some values</td>
      </tr>
    </tbody>
  </table>
</div>

2. 调整样式逻辑 #

移除.sticky-column默认的右侧边框，新增一个专门控制边框显示的类：

// ***** Table ***** //
.table {
  overflow-x: auto;
  h1 {
    grid-area: h;
  }
  table {
    border-collapse: collapse;
    td, th {
      background-color: #ffffff;
    }
  }
  .sort-table {
    width: 100%;
    tbody {
      border-top: 1px solid $primary-blue;
      border-bottom: 1px solid $primary-blue;
      tr + tr td {
        border-top: 1px solid $greyscale-light-grey;
      }
      td {
        padding-left: 10px !important;
        white-space: nowrap;
      }
    }
    .col {
      &:focus  {
        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px $primary-blue;
      }
      padding: 20px 65px 20px 5px;
    }

    .row {
      padding: 20px;
      .data {
        padding: 20px;
        color: $primary-dark-blue;
      }
      &:hover {
        background-color: $primary-light-blue;
        .data {
          background-color: $primary-light-blue;
        }
      }
    }

    .sticky-column {
      position: sticky;
      left: 0;
      z-index: 2;
      // 移除默认边框
      // border-right: 1px solid $primary-light-blue;
    }

    // 新增边框显示类
    .sticky-column.show-right-border {
      border-right: 1px solid $primary-light-blue;
    }
  }
}

.hidden{
  visibility: hidden;
}

// ***** End of table ***** //

3. 实现Angular组件逻辑 #

在组件类中添加滚动事件处理方法，根据滚动距离切换类：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-table-component',
  templateUrl: './your-table-component.component.html',
  styleUrls: ['./your-table-component.component.scss']
})
export class YourTableComponent {
  onTableScroll(container: HTMLDivElement): void {
    const stickyColumns = container.querySelectorAll('.sticky-column');
    const shouldShowBorder = container.scrollLeft > 0;
    
    stickyColumns.forEach(col => {
      shouldShowBorder 
        ? col.classList.add('show-right-border') 
        : col.classList.remove('show-right-border');
    });
  }
}

补充说明 #

• 滚动事件直接绑定到容器本身，避免全局监听带来的性能损耗
• 通过scrollLeft值判断是否发生水平滚动，逻辑简洁可靠
• 采用类切换控制边框显示，符合CSS模块化的最佳实践

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