Google Chrome中多容器同时执行smooth模式scrollIntoView()失效问题

我之前也碰到过这个Chrome特有的头疼问题——当你同时触发多个容器的scrollIntoView({behavior: 'smooth'})时，后触发的容器平滑滚动会直接打断前一个的滚动动画，而Firefox则能毫无压力地支持多容器并行平滑滚动。用behavior: 'instant'虽然能绕开问题，但确实牺牲了用户体验，下面给你几个可行的解决方案：

问题根源分析 #

Chrome的原生平滑滚动动画是基于浏览器主线程的单一动画队列实现的，当你同时发起多个平滑滚动请求时，浏览器会默认优先处理新请求，直接中断未完成的旧动画。而Firefox的动画调度机制对多容器滚动的支持更独立，允许并行处理多个互不干扰的平滑滚动任务。

解决方案：自定义平滑滚动函数 #

既然原生API在Chrome里有局限，我们可以用requestAnimationFrame手动实现平滑滚动，让每个容器的滚动动画都是独立的任务，不会互相干扰。

Angular示例代码 #

HTML模板（component.html）

<div class="container" #container1>
  <div class="long-content">容器1的长内容占位，用来撑开滚动区域...</div>
  <div class="target" #target1>容器1的目标定位元素</div>
</div>

<div class="container" #container2>
  <div class="long-content">容器2的长内容占位，用来撑开滚动区域...</div>
  <div class="target" #target2>容器2的目标定位元素</div>
</div>

<button (click)="triggerNativeScroll()">触发原生平滑滚动（Chrome会冲突）</button>
<button (click)="triggerCustomScroll()">触发自定义平滑滚动（多容器并行）</button>

TypeScript逻辑（component.ts）

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

@Component({
  selector: 'app-scroll-test',
  templateUrl: './scroll-test.component.html',
  styleUrls: ['./scroll-test.component.css']
})
export class ScrollTestComponent {
  @ViewChild('container1') container1!: ElementRef<HTMLDivElement>;
  @ViewChild('target1') target1!: ElementRef<HTMLDivElement>;
  @ViewChild('container2') container2!: ElementRef<HTMLDivElement>;
  @ViewChild('target2') target2!: ElementRef<HTMLDivElement>;

  // 原生API触发（Chrome会出现滚动中断问题）
  triggerNativeScroll() {
    this.target1.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    this.target2.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }

  // 自定义平滑滚动核心函数
  private smoothScroll(container: HTMLElement, target: HTMLElement) {
    const targetPosition = target.offsetTop - container.offsetTop;
    const startPosition = container.scrollTop;
    const distance = targetPosition - startPosition;
    const duration = 600; // 滚动持续时间，可根据需求调整
    let startTimestamp: number | null = null;

    const animateScroll = (timestamp: number) => {
      if (!startTimestamp) startTimestamp = timestamp;
      const progress = timestamp - startTimestamp;
      // 用缓动函数让滚动更自然
      const currentScroll = this.easeInOutCubic(progress, startPosition, distance, duration);
      container.scrollTop = currentScroll;
      if (progress < duration) {
        window.requestAnimationFrame(animateScroll);
      }
    };

    window.requestAnimationFrame(animateScroll);
  }

  // 缓动函数：实现类似原生的平滑滚动曲线
  private easeInOutCubic(t: number, b: number, c: number, d: number): number {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t * t + b;
    t -= 2;
    return c / 2 * (t * t * t + 2) + b;
  }

  // 触发自定义平滑滚动（多容器可并行无冲突）
  triggerCustomScroll() {
    this.smoothScroll(this.container1.nativeElement, this.target1.nativeElement);
    this.smoothScroll(this.container2.nativeElement, this.target2.nativeElement);
  }
}

CSS样式（component.css）

.container {
  width: 320px;
  height: 220px;
  overflow-y: auto;
  border: 1px solid #ddd;
  margin: 15px 0;
  padding: 10px;
}

.long-content {
  height: 600px;
  background-color: #f5f5f5;
}

.target {
  height: 60px;
  background-color: #2196F3;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  margin-right: 12px;
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background-color: #4CAF50;
  color: white;
}

button:nth-child(2) {
  background-color: #ff9800;
}

额外提示 #

• 如果你的项目已经引入了第三方动画库（比如GSAP），也可以直接用库提供的滚动动画方法，它们的多动画调度机制通常也能避免Chrome的这个问题。
• 自定义滚动函数里的duration和缓动函数可以根据产品的交互风格灵活调整，让滚动效果更贴合需求。

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