css - Ionic 4 เลื่อนหน้าอย่างราบรื่นไปยัง anchor

ฉันมีหน้าแลนดิ้งเพจเพียงหน้าเดียวที่มีเมนูและบางส่วนของเนื้อหา แต่ละรายการในเมนูควรเลื่อนอย่างราบรื่นไปยังส่วนที่กำหนด

วิธีที่ผมลองทำครั้งแรกคือ:

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

คำตอบ #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 ถ้าคุณต้องการเลื่อนระยะทางที่แน่นอน