使用scrollIntoView结合索引实现滚动定位时遇到的问题

问题根源 #

1. 原代码中scrollToContent方法未接收点击项的索引，直接遍历所有.item-heading元素执行滚动，导致点击一次会触发所有元素滚动到视图。
2. 错误代码里的item[index]属于逻辑错误：item是单个Element对象而非数组，TypeScript会报错是因为Element没有数字索引签名。

解决方案一：传递索引+直接操作DOM #

1. 修正HTML，给点击事件传递当前项索引 #

<ul class="cbds-c-tabs-v2__list-nav" 
    [ngClass]="isTabNavVisible ? 'cbds-u-display__none' : ''">
    <li 
      *ngFor="let item of items; index as index"> <!-- 注意Angular的*ngFor用分号分隔变量，原代码逗号是语法错误 -->
      <a 
        (click)="scrollToContent(index)" 
        id="cbds-tabs-v2-mobile__list-item-{{ uid + index }}"
        class="cbds-tabs-v2-mobile__list-item">
        {{ item.tabLabel }}
      </a>
    </li>
  </ul>

2. 修改滚动方法，根据索引定位元素 #

scrollToContent(index: number) {
  const elCollectionArr = Array.from(document.querySelectorAll('.item-heading'));
  // 校验索引有效性，避免数组越界
  if (index >= 0 && index < elCollectionArr.length) {
    elCollectionArr[index].scrollIntoView({ behavior: "smooth" });
  }
}

解决方案二：Angular原生方式（推荐） #

避免直接操作DOM，用Angular的ViewChildren管理元素引用，更符合框架规范：

1. 组件类中定义ViewChildren #

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

// ...

@ViewChildren('itemHeading') itemHeadings!: QueryList<ElementRef>;

2. 给目标元素添加模板引用变量 #

<div 
  class="cbds-c-mobile__item" 
  *ngFor="let item of items; index as index" 
  id="{{ uid + index }}" 
  tabindex="-1">

  <h3 #itemHeading class="item-heading"> <!-- 添加#itemHeading模板引用 -->
    {{ item.tabLabel }}
  </h3>

  <div 
    [innerHTML]="item.tabPanel" 
    class="{{ mobilePanelId }} {{ classes }}">
  </div>
</div>

3. 修改滚动方法 #

scrollToContent(index: number) {
  const headingElement = this.itemHeadings.toArray()[index];
  if (headingElement) {
    headingElement.nativeElement.scrollIntoView({ behavior: "smooth" });
  }
}

关键说明 #

• 核心是给滚动方法传递点击项的索引，才能精准定位到对应元素，而非遍历所有元素。
• 错误代码中的item[index]逻辑错误：forEach的第一个参数是数组中的单个元素，不是数组本身，正确用法是通过数组的索引取值（elCollectionArr[index]）。

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