如何控制scrollTo、scrollTop等JavaScript自动滚动速度？求Angular方案

原生JavaScript解决方案 #

原生scrollTo/scrollTop的smooth行为无法自定义滚动速度，要实现可控制速度的滚动，需要通过requestAnimationFrame逐帧计算滚动位置，配合缓动函数来实现。针对短距离滚动场景，使用线性缓动能更贴近手动滚动的自然感。

以下是自定义滚动函数的示例：

function customScrollTo(element, targetY, duration = 300) {
  const startY = element.scrollTop;
  const distance = targetY - startY;
  let startTime = null;

  function animation(currentTime) {
    if (!startTime) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    const progress = Math.min(timeElapsed / duration, 1);
    // 线性缓动，短距离滚动更接近手动效果，可替换为其他缓动公式
    const easeProgress = progress; 
    element.scrollTop = startY + distance * easeProgress;

    if (timeElapsed < duration) {
      requestAnimationFrame(animation);
    }
  }

  requestAnimationFrame(animation);
}

// 使用示例：让容器滚动到100px位置，持续200ms（短距离建议缩短duration）
const container = document.getElementById('container');
customScrollTo(container, 100, 200);

如果需要更自然的缓动效果（比如先快后慢），可以将easeProgress替换为progress * (2 - progress)这类缓动公式，根据需求调整即可。

Angular解决方案 #

在Angular中，可将自定义滚动逻辑封装为服务，便于组件复用，同时遵循Angular的最佳实践（避免直接在组件中操作DOM）。

1. 封装滚动服务 #

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ScrollService {
  // 自定义滚动到指定位置
  customScrollTo(element: HTMLElement, targetY: number, duration = 300): void {
    const startY = element.scrollTop;
    const distance = targetY - startY;
    let startTime: number | null = null;

    const animation = (currentTime: number): void => {
      if (!startTime) startTime = currentTime;
      const timeElapsed = currentTime - startTime;
      const progress = Math.min(timeElapsed / duration, 1);
      // 线性缓动适配短距离滚动
      const easeProgress = progress;
      element.scrollTop = startY + distance * easeProgress;

      if (timeElapsed < duration) {
        requestAnimationFrame(animation);
      }
    };

    requestAnimationFrame(animation);
  }

  // 扩展：滚动到指定元素位置
  scrollToElement(targetElement: HTMLElement, duration = 300): void {
    const container = targetElement.parentElement;
    if (!container) return;
    const targetY = targetElement.offsetTop - container.offsetTop;
    this.customScrollTo(container, targetY, duration);
  }
}

2. 在组件中使用服务 #

import { Component, ViewChild, ElementRef } from '@angular/core';
import { ScrollService } from './scroll.service';

@Component({
  selector: 'app-scroll-demo',
  template: `
    <div #scrollContainer class="scroll-container">
      <!-- 滚动内容 -->
    </div>
    <button (click)="triggerShortScroll()">触发短距离滚动</button>
  `,
  styles: [`
    .scroll-container {
      height: 400px;
      overflow-y: auto;
    }
  `]
})
export class ScrollDemoComponent {
  @ViewChild('scrollContainer') scrollContainer!: ElementRef<HTMLElement>;

  constructor(private scrollService: ScrollService) {}

  triggerShortScroll(): void {
    // 短距离滚动建议设置更小的duration，比如150ms，贴近手动滚动速度
    this.scrollService.customScrollTo(this.scrollContainer.nativeElement, 200, 150);
  }
}

通过调整duration参数，可以精准控制滚动速度：数值越小，滚动越快，短距离场景下设置100-200ms的duration能获得更接近正常手动滚动的效果。

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