Angular中实现选中li滚动至可滚动ul可视区域中部的方法

我有一个固定高度的可滚动ul，内部li高度固定为40px，需要在Angular应用中实现：点击选中li时，将该li滚动到ul可视区域的中间位置。尝试了以下代码但未达到预期效果：

原HTML代码 #

<ul id="record-selector-list">
        <li id="{{'record-selector-row-' + i}}" #scrollItem *ngFor="let row of getRecords();let i=index;" class="record-selector-elem" (click)="selectPart(i)">
            
        </li>
</ul>

原TypeScript代码 #

public selectPart(index: number) {
        var ulElement = document.getElementById('record-selector-list');
        var liElement = document.getElementById('record-selector-row-' + index);

        const midpoint = window.innerHeight / 2;
        const scrollToPosition = midpoint - liElement.getBoundingClientRect().top

        ulElement.scrollTop = scrollToPosition;
        }
    }
}

解决方案 #

问题分析 #

原代码存在两个核心问题：

1. 用window.innerHeight计算中点，这是整个浏览器窗口的高度，不是ul自身的可视区域高度，导致中点计算错误
2. getBoundingClientRect().top是li相对于浏览器视口的位置，不是相对于ul容器的偏移，滚动位置的计算逻辑完全偏离

另外，Angular中不推荐直接用document.getElementById操作DOM，建议使用框架提供的ViewChild/ViewChildren来获取元素，更符合组件化规范。

修正后的代码 #

HTML部分（优化模板引用）

<ul #recordList class="record-selector-list">
  <li #scrollItems *ngFor="let row of getRecords(); let i=index" 
      class="record-selector-elem" 
      (click)="selectPart(i)">
  </li>
</ul>

TypeScript部分（修正滚动逻辑）

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

@Component({
  // 替换为你的组件元数据（selector、templateUrl等）
})
export class YourComponent {
  // 获取ul容器元素
  @ViewChild('recordList') recordList!: ElementRef<HTMLUListElement>;
  // 获取所有li元素的列表
  @ViewChildren('scrollItems') scrollItems!: QueryList<ElementRef<HTMLLIElement>>;

  public selectPart(index: number) {
    const ulElement = this.recordList.nativeElement;
    const liElement = this.scrollItems.toArray()[index].nativeElement;

    // 计算ul可视区域的垂直中点
    const ulMidpoint = ulElement.clientHeight / 2;
    // 获取li相对于ul容器的顶部偏移量
    const liOffsetTop = liElement.offsetTop;
    // 计算最终滚动位置：让li的中心与ul的可视中心对齐
    const scrollToPosition = liOffsetTop - ulMidpoint + liElement.clientHeight / 2;

    // 执行滚动，支持平滑动画（不需要平滑滚动可去掉behavior参数）
    ulElement.scrollTo({
      top: scrollToPosition,
      behavior: 'smooth'
    });
  }
}

关键修正点说明 #

• 用ul自身高度计算中点：ulElement.clientHeight是ul容器的可视高度，这才是我们需要的滚动区域中点基准
• 正确获取li的相对偏移：liElement.offsetTop直接返回li相对于ul容器的顶部距离，是计算scrollTop的正确值
• 让li真正居中：滚动位置需要加上li自身高度的一半，确保li的垂直中心与ul可视区域的中心对齐
• Angular规范实现：用ViewChild/ViewChildren获取DOM元素，避免直接操作全局document，更符合组件封装原则

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