Angular 5中如何让溢出滚动的div垂直居中到指定元素？

嘿，刚好我之前做过类似订单簿的需求，跟你说几个能实现默认居中到中间行的方法，完全贴合你要的GDAX那种效果～

核心实现方案：动态计算滚动位置 #

因为你是用div模拟的表格，核心思路就是等数据渲染完成后，计算出中间行的位置，然后手动设置滚动容器的scrollTop，让中间行垂直居中显示。

步骤1：模板结构设置 #

给滚动容器加模板引用变量，给中间行标记特殊类：

<!-- 滚动容器：设置固定高度+垂直滚动 -->
<div #bookContainer class="order-book-container">
  <!-- 循环渲染行，给中间行加middle-row类 -->
  <div 
    class="book-row" 
    *ngFor="let row of bookData; let i = index"
    [class.middle-row]="i === getMiddleIndex()"
  >
    <div class="cell">{{row.price}}</div>
    <div class="cell">{{row.volume}}</div>
  </div>
</div>

对应的基础CSS（flex布局）：

.order-book-container {
  height: 400px; /* 固定容器高度，触发滚动 */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.book-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
}

.cell {
  flex: 1;
  text-align: right;
}

步骤2：组件内计算滚动位置 #

在Angular组件里，用ViewChild获取容器，等数据加载完成后计算并设置滚动：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-order-book',
  templateUrl: './order-book.component.html',
  styleUrls: ['./order-book.component.css']
})
export class OrderBookComponent implements AfterViewInit {
  bookData: any[] = []; // 你的订单数据，比如从API获取
  @ViewChild('bookContainer') bookContainer!: ElementRef<HTMLDivElement>;

  ngAfterViewInit() {
    // 注意：要确保数据已经渲染完成，这里可以替换成你数据订阅的回调
    this.loadBookData().then(() => {
      this.scrollToMiddleRow();
    });
  }

  // 模拟数据加载
  async loadBookData() {
    // 这里替换成你的真实数据请求
    this.bookData = Array.from({ length: 50 }, (_, i) => ({
      price: (100 + i).toFixed(2),
      volume: (Math.random() * 10).toFixed(2)
    }));
  }

  // 获取中间行索引
  getMiddleIndex(): number {
    return Math.floor(this.bookData.length / 2);
  }

  // 滚动到中间行并居中
  scrollToMiddleRow() {
    const container = this.bookContainer.nativeElement;
    const middleRow = container.querySelector('.middle-row') as HTMLDivElement;
    if (!middleRow) return;

    // 计算让中间行垂直居中的scrollTop值
    const containerHalfHeight = container.clientHeight / 2;
    const rowHalfHeight = middleRow.clientHeight / 2;
    const targetScrollTop = middleRow.offsetTop - containerHalfHeight + rowHalfHeight;

    // 直接设置滚动位置（如果要平滑滚动可以用scrollTo方法）
    container.scrollTop = targetScrollTop;
    // 平滑滚动版本：container.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
  }
}

关键注意点 #

• 一定要等数据完全渲染后再调用滚动方法，否则找不到中间行元素；如果数据是动态更新的，要在数据更新后重新执行scrollToMiddleRow。
• 如果你的中间行不是数组中间的元素（比如对应最新成交价的行），只需要修改getMiddleIndex的逻辑，返回对应行的索引即可。

临时替代方案 #

如果上面的动态计算方案因为数据频繁更新导致滚动闪烁，可以试试这两个替代方案：

方案1：用CSS滚动对齐增强体验 #

给容器和行加上scroll-snap属性，让滚动时自动对齐行的中心，结合初始滚动定位：

.order-book-container {
  /* 原有样式 */
  scroll-snap-type: y mandatory; /* 强制滚动对齐 */
}

.book-row {
  /* 原有样式 */
  scroll-snap-align: center; /* 行对齐到容器中心 */
}

组件里还是用之前的scrollToMiddleRow方法设置初始滚动位置，这样用户滚动时会自动对齐行中心，体验更流畅。

方案2：固定中间行到容器中心 #

如果不需要滚动条显示在中间位置，只是要中间行始终可见，可以用粘性定位：

.middle-row {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  background-color: #f5f5f5; /* 加背景区分 */
}

这个方案的效果是中间行固定在容器垂直中心，不管怎么滚动都不会消失，适合作为临时替代。

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