Я ищу что-то похожее на scrollIntoView() в Ionic2 использовать, например, когда я нажимаю кнопку.

Ни один из методов, описанных в ion-content, не помогает.

12
user1275105 8 Сен 2016 в 20:24

6 ответов

Лучший ответ

Взгляните на этот рабочий плункер

Вы можете использовать метод 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);
  }
}
14
sebaferreras 27 Сен 2017 в 15:09

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

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

НПМ
ngx-scroll-to

GitHub
ngx-scroll-to

1
Nicky 20 Июл 2017 в 14:06

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

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

1
azyth 19 Июл 2018 в 13:06

Я бы использовал анкерную ссылку в HTML.

Просто укажите элемент и id = "scroll XYZ" и оберните кнопку в

Примере:

<a href="#scrollXYZ"><button>Example</button></a>
<div id="scrollXYZ"><h2>Scroll to this</h2></div>
1
jinnoflife 9 Сен 2016 в 08:01

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

Screenshot from Ionic docs

0
Sinandro 19 Май 2019 в 16:39

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

Методы также не контролируют анимацию прокрутки.

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

.html

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

...

</ion-row>

ts

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

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

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

1
Jai 29 Сен 2019 в 11:25