web-dev-qa-db-de.com

So scrollen Sie das Element in die Ansicht, wenn es angeklickt wird

Ich suche etwas Ähnliches wie scrollIntoView() in Ionic2, das ich zum Beispiel verwenden kann, wenn ich auf eine Schaltfläche klicke.

Keine der in ion-content help beschriebenen Methoden.

9
user1275105

Bitte schauen Sie sich diesen funktionierenden Plunker an

Sie können die scrollTo(x,y,duration)-Methode (docs) ..__ verwenden. Der Code ist ziemlich einfach: Zuerst ermitteln wir die Position des Zielelements (in diesem Fall ein <p></p>), und dann verwenden wir diese in der scrollTo(...)-Methode. Zuerst die Ansicht:

<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>

Und der Komponentencode:

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);
  }
}
11
sebaferreras

Ich habe festgestellt, dass die oben genannte Lösung mit Angular Universal Server-seitigem Rendering (SSR) nicht gut funktioniert, da document nicht serverseitig verfügbar ist.

Daher habe ich ein praktisches Plugin geschrieben, mit dem Sie zu Elementen in Angular 4+ scrollen können, die mit AoT und SSR funktionieren.

NPM
ngx-scroll-to

GitHub
ngx-scroll-to

1
Nicky

Ich würde einen Link-Link in HTML verwenden.

Geben Sie einfach elemnt und id = "scrollXYZ" an und wickeln Sie den Button in ein 

Beispiel:

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

Ich habe versucht, dies in Ionic 3 zu tun, und aufgrund der Tatsache, dass <Element>.offsetTop10 (der Abstand oben auf dem Element) anstelle des Abstandes zum oberen Rand der Seite (viel größere unbekannte Anzahl) zurückgegeben wurde, benutze ich <Element>.scrollIntoView() , das hat gut für mich funktioniert.

Um das <Element>-Objekt zu erhalten, habe ich document.getElementById() verwendet, es gibt jedoch viele andere Optionen, wie man einen Griff bekommen kann. 

0
azyth

Der Ionengehalt sollte hat Methoden zum Scrollen zu bestimmten untergeordneten Elementen, wie tief sie auch sein mögen. Die gegenwärtigen Methoden sind in Ordnung, aber eine Perspektive des Zwecks von ionic ist es, mühsamen, langweiligen Code wie document.getElementById Obsolet zu machen.

Die Methoden haben auch keine Kontrolle über die Scroll-Animation.

Daher ist derzeit die beste Option die Methode scrollIntoView. Fügen Sie dem Element, zu dem Sie einen Bildlauf durchführen möchten, eine ID hinzu und rufen Sie dann mit getElementbyID scrollIntoView auf. Damit:

. html

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

...

</ion-row>

ts

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

Rufen Sie dann die Methode bei einem DOM-Ereignis oder einem Klick auf eine Schaltfläche auf. Wenn Ihr Element bedingt ist, funktioniert dies wahrscheinlich nicht. Verwenden Sie stattdessen ein bedingtes nsichtbares Attribut oder, wenn Sie ngIf verwenden müssen, die Logik so, dass das Element zuerst eingefügt wird.

Ich habe dies mit verschiedenen anderen ionic (4) UI-Komponenten versucht und es funktioniert gut.

0
Jai Preston

In Ionic 4 Wird die Bildlauffunktion in scrollToPoint() umbenannt.

Screenshot from Ionic docs

0
Sinandro