Angular 5中如何实现滚动到指定类元素？技术求助

我完全理解你现在的困扰——在Angular项目里用类名实现滚动确实和原生ID滚动不一样，尤其是还涉及到组件渲染时机的坑，咱们一步步来搞定它。

首先，先分析下你遇到的核心问题：

• 原生ID滚动能生效，是因为目标元素在点击时已经稳定存在于DOM中；
• 按类名滚动（不管是原生JS还是jQuery）失效，大概率是点击日期后展开的事件元素是异步渲染的，你执行滚动代码时，DOM还没更新，自然找不到目标元素；另外Angular的变更检测机制也可能和jQuery的DOM操作冲突。

下面给你几个符合Angular最佳实践的解决方案：

方案1：用Angular的ViewChildren获取元素（推荐） #

Angular不推荐直接操作DOM，更建议用框架提供的API来获取元素，这样能完美适配组件的生命周期和变更检测：

1. 在组件类中引入必要的依赖，用ViewChildren获取目标元素的引用：

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

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css']
})
export class CalendarComponent {
  // 通过模板引用变量获取所有类为call-open的元素
  @ViewChildren('callOpen') callOpenElements!: QueryList<ElementRef>;

  constructor(private cdr: ChangeDetectorRef) {}

  // 日历日期点击事件处理函数
  onDateClicked() {
    // 1. 先触发变更检测，确保展开的事件元素已渲染到DOM
    this.cdr.detectChanges();
    
    // 2. 获取第一个目标元素（如果有多个的话，可根据需求调整）
    const targetElement = this.callOpenElements.first?.nativeElement;
    if (targetElement) {
      // 执行滚动，支持平滑动画
      targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }
}

2. 在模板中给展开的事件元素加上模板引用变量：

<!-- 展开的当日事件容器 -->
<div #callOpen class="call-open">
  <!-- 事件内容 -->
</div>

方案2：原生JS按类名滚动（适配DOM异步更新） #

如果不想用Angular的API，也可以用原生JS，但必须确保在DOM更新完成后执行滚动：

onDateClicked() {
  // 用setTimeout把滚动逻辑放到下一个事件循环，确保DOM已更新
  setTimeout(() => {
    const targetElements = document.querySelectorAll('.call-open');
    if (targetElements.length > 0) {
      // 取第一个目标元素执行滚动
      (targetElements[0] as HTMLElement).scrollIntoView({ 
        behavior: 'smooth', 
        block: 'start' 
      });
    }
  }, 0);
}

方案3：修复你的jQuery代码（不推荐，但可以试试） #

如果一定要用jQuery，核心是要等DOM更新后再执行，同时补全你没写完的代码：

onDateClicked() {
  setTimeout(() => {
    const $target = $('.call-open');
    if ($target.length > 0) {
      // 补全offset().top，加上动画时长
      $('html, body').animate({
        scrollTop: $target.offset().top
      }, 300);
    }
  }, 0);
}

⚠️ 注意：不推荐在Angular项目中混用jQuery，因为Angular的变更检测机制可能会覆盖jQuery的DOM操作，后期维护容易出问题。

最后再提醒下：如果你的事件展开是通过*ngIf或者异步数据渲染的，一定要确保数据已经加载完成、DOM已经更新后再执行滚动逻辑，上面的detectChanges()或setTimeout(0)都是为了处理这个时机问题。

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