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 управляет прокруткой в ​​компоненте ion-content.

Компонент содержимого поставляется с несколькими методами прокрутки, такими как 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, если вы хотите прокрутить определенное расстояние