Как прокручивать элемент в поле зрения при нажатии

Пожалуйста, взгляните на этот рабочий планкер

Вы можете использовать метод scrollTo(x,y,duration) (docs). Код довольно прост: сначала мы получаем позицию целевого элемента (в данном случае <p></p>), а затем используем ее в методе scrollTo(...). Сначала вид:

<ion-header>
  <ion-navbar primary>
    <ion-title>
      <span>My App</span>
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

  <button ion-button text-only (click)="scrollElement()">Click me</button>

  <div style="height: 600px;"></div>

  <!-- Notice the #target in the p element -->
  <p #target>Secret message!</p>

  <div style="height: 600px;"></div>

</ion-content>

И код компонента:

import { ViewChild, Component } from '@angular/core';
import { NavController, Content } from 'ionic-angular';

@Component({
  templateUrl:"home.html"
})
export class HomePage {
  @ViewChild(Content) content: Content;
  @ViewChild('target') target: any;

  constructor() {   }

  public scrollElement() {
    // Avoid reading the DOM directly, by using ViewChild and the target reference
    this.content.scrollTo(0, this.target.nativeElement.offsetTop, 500);
  }
}

Содержимое ion должно иметь методы для прокрутки до определенных дочерних элементов, какими бы глубокими они ни были. Текущие методы хороши, но одна из целей ionic состоит в том, чтобы сделать трудоемкий, скучный код, такой как document.getElementById, устаревшим.

В методах также отсутствует контроль над анимацией прокрутки.

Следовательно, в настоящее время лучшим вариантом является метод scrollIntoView. Прикрепите идентификатор к элементу, к которому вы хотите прокрутить, затем используйте getElementbyID для вызова scrollIntoView. Так:

.html

...
<ion-row id="myElement">

...

</ion-row>

ТС

...
 scrollToMyElement() {
    document.getElementById('myElement').scrollIntoView({
      behavior: 'smooth',
      block: 'center'
    });
  }

Затем вызовите метод для некоторого события DOM или нажатия кнопки. Если ваш элемент условный, это, скорее всего, не сработает. Вместо этого используйте условный атрибут hidden или, если необходимо использовать ngIf, укажите логику так, чтобы элемент был вставлен первым.

Я пробовал это с различными другими ионными (4) компонентами пользовательского интерфейса, и он отлично работает.

Для Ionic-4 в используемые термины внесено несколько изменений.

1. Контент изменен на IonContent.
2. scrollTo изменен на scrollToPoint
3. ionic-angular изменен на @ionic/angular
4. viewChild должен иметь { static: false // только если вы используете angular > 8.0

Вот модифицированный код принятого ответа для ionic-4

<ion-header>
      <ion-navbar primary>
        <ion-title>
          <span>My App</span>
        </ion-title>
      </ion-navbar>
</ion-header>
<ion-content>    
      <button ion-button text-only (click)="scrollElement(target)">Click me</button>

      <div style="height: 600px;"></div>

      <!-- Notice the #target in the p element -->
      <p #target>Secret message!</p>

      <div style="height: 600px;"></div>
</ion-content>

Код компонента:

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

@Component({
  templateUrl:"home.html"
})
export class HomePage {
   @ViewChild('target', { static: false }) target: ElementRef;
   @ViewChild('ion_content', { static: false }) ionContent: IonContent; //change-2 for angular > 8.0 remove this for angular 6.x

  constructor() {   }

  public scrollElement($target) {
    this.ionContent.scrollToPoint(0, $target.offsetTop, 500); 
    //$target (prefered if you have multiple scroll target) could be this.target.nativeElement
  }
}

Я бы использовал ссылку anker в HTML.

Просто дайте elemnt и id="scrollXYZ" и оберните кнопку в

Пример:

<a href="#scrollXYZ"><button>Example</button></a>
<div id="scrollXYZ"><h2>Scroll to this</h2></div>

Я заметил, что приведенное выше решение плохо работает с универсальным серверным рендерингом Angular (SSR) из-за того, что document недоступен на стороне сервера.

Поэтому я написал удобный плагин для прокрутки элементов в Angular 4+, которые работают с AoT и SSR.

NPM
ngx-scroll-to

GitHub
ngx-scroll-to

Я пытался сделать это в Ionic 3, и из-за того, что <Element>.offsetTop возвращал 10 (отступ в верхней части элемента) вместо расстояния до верхней части страницы (гораздо большее неизвестное число), я просто использовал <Element>.scrollIntoView() , который хорошо работал для меня.

Чтобы получить объект <Element>, я использовал document.getElementById(), но есть много других вариантов, как это сделать.

В Ionic 4 функция прокрутки переименована в scrollToPoint().