Ionic中如何中断scrollToBottom/scrollToTop滚动及匀速滚动问题

问题1：中断正在进行的滚动 #

Ionic内置的scrollToTop/scrollToBottom方法的动画是内部管理的，无法直接中断。解决思路是手动实现滚动动画，通过requestAnimationFrame控制滚动过程，同时保存动画ID用于随时终止。

问题2：实现全程匀速滚动 #

默认滚动使用的是缓动函数（如ease-out），导致末尾减速。要实现匀速，需用线性进度计算每帧的滚动位移，避免任何缓动逻辑。

完整代码实现 #

组件类代码

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

@Component({
  selector: 'app-long-text',
  templateUrl: './long-text.page.html',
  styleUrls: ['./long-text.page.scss'],
})
export class LongTextPage {
  @ViewChild(IonContent) content!: IonContent;
  private animationId: number | null = null;

  async scrollToTop() {
    // 先终止当前滚动动画
    this.stopScroll();
    const scrollEl = await this.content.getScrollElement();
    this.startLinearScroll(scrollEl.scrollTop, 0, 30000);
  }

  async scrollToBottom() {
    this.stopScroll();
    const scrollEl = await this.content.getScrollElement();
    const targetY = scrollEl.scrollHeight - scrollEl.clientHeight;
    this.startLinearScroll(scrollEl.scrollTop, targetY, 30000);
  }

  // 终止滚动动画
  stopScroll() {
    if (this.animationId) {
      cancelAnimationFrame(this.animationId);
      this.animationId = null;
    }
  }

  // 实现线性匀速滚动
  private startLinearScroll(startY: number, targetY: number, duration: number) {
    const distance = targetY - startY;
    const startTime = performance.now();

    const animate = (currentTime: number) => {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);
      // 线性计算当前滚动位置，保证匀速
      const currentY = startY + distance * progress;

      // 直接跳转当前位置，禁用Ionic自带动画
      this.content.scrollToPoint(0, currentY, 0);

      if (progress < 1) {
        this.animationId = requestAnimationFrame(animate);
      } else {
        this.animationId = null;
      }
    };

    this.animationId = requestAnimationFrame(animate);
  }

  // 用户手动滚动时自动终止动画
  async onUserScroll() {
    this.stopScroll();
  }
}

模板代码

<ion-content (ionScroll)="onUserScroll()">
  <!-- 长文本内容容器 -->
  <div class="full-content">
    <!-- 你的长文本内容 -->
  </div>

  <!-- 滚动控制按钮 -->
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button (click)="scrollToTop()">
      <ion-icon name="arrow-up"></ion-icon>
    </ion-fab-button>
    <ion-fab-button (click)="scrollToBottom()">
      <ion-icon name="arrow-down"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

关键说明 #

1. 中断滚动：通过cancelAnimationFrame取消动画ID，同时监听ionScroll事件，用户手动滚动时自动终止动画。
2. 匀速滚动：使用progress = elapsedTime / duration的线性进度计算滚动位置，没有添加任何缓动函数，确保全程速度一致。
3. 避免冲突：每次触发新滚动前先调用stopScroll，防止多个动画同时运行。

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