Ionic 4 平滑滚动到锚点

Question

我有一个带有菜单和一些部分的登陆页面。菜单中的每个项目都应平滑滚动到给定部分。

我的第一个方法是：

window.scrollTo({
  y: this.el.nativeElement.querySelector('app-contact').offsetTop // 600
  behavior: 'smooth'
});

我面临的问题：

1. Ionic 4 似乎没有响应scrollTo即使我写window.scrollTo(0, 300)，也不会发生任何事情。

2. behavior: 'smooth'并非所有浏览器都支持。因此，我不能使用这种方法。

我想知道如何使用 Ionic 4 实现锚点的平滑滚动。

Answer 1

Ionic 处理其离子内容组件中的滚动。

内容组件附带了一些滚动方法，例如scrollToPoint，这可能对您有用。

要获取 IonContent 对象，您需要使用 ViewChild

import {ViewChild} from '@angular/core'
export class yourPage {
  @ViewChild('ion-content') content: IonContent;
  scroll(x, y) {
    this.content.scrollToPoint(x, y, 300)
  }
}

或者如果您想滚动一定距离，也可以使用scrollByPoint