Comment faire défiler l'élément dans la vue lorsqu'il est cliqué

Suis à la recherche de quelque chose de semblable à scrollIntoView() dans Ionic2 à utiliser lorsque je clique sur un bouton, par exemple.

Aucune des méthodes détaillées dans ion-content aider.

OriginalL'auteur user1275105 | 2016-09-08

  1. 11

    Veuillez jeter un oeil à ce travail plunker

    Vous pouvez utiliser le scrollTo(x,y,duration) méthode (docs).
    Le code est assez simple, nous avons d'abord d'obtenir la position de l'élément cible (un <p></p> dans ce cas), puis nous les utilisons dans le scrollTo(...) méthode. D'abord la vue:

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

    Et le code du composant:

    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);
  }
}
    Le lien vers le plunker ne semble pas afficher quoi que ce soit lié à la réponse.
    Je suis désolé @Willwsharp, le plunker utilisé une ancienne version de l'Ionique. Je vais créer une nouvelle plunker plus tard aujourd'hui 🙂
    J'ai mis à jour la réponse pour éviter de lire les DOM directement. Maintenant, il utilise ViewChild pour obtenir la référence de l'élément HTML

    OriginalL'auteur sebaferreras

  2. 1

    J'utilise un anker lien en HTML.

    Juste donner l'elemnt et id="scrollXYZ" et envelopper le bouton dans un

    Exemple:

    <a href="#scrollXYZ"><button>Example</button></a>
<div id="scrollXYZ"><h2>Scroll to this</h2></div>
    Cela ne fonctionnera pas si l'élément est ajouté dynamiquement
    il le fera si vous ajoutez le scrollTo dynamiquement trop.

    OriginalL'auteur Alex Wink

  3. 1

    J'ai remarqué que la solution ci-dessus ne fonctionnent pas bien avec Angulaire Universelle de rendu côté serveur (SSR) en raison de document ne pas être disponible et côté serveur.

    Donc j'ai écrit un plugin pratique pour atteindre le défilement à éléments Anguleux 4+ qui travaillent avec AoT et SSR

    MNP

    ngx-faites défiler jusqu'à

    GitHub

    ngx-faites défiler jusqu'à

    La meilleure solution je pense

    OriginalL'auteur Nicky

  4. 1

    J'ai essayé de faire ce Ionique, de 3 et en raison du fait que <Element>.offsetTop était de retour10 (le rembourrage sur le dessus de l'élément) au lieu de la distance vers le haut de la page (en beaucoup plus grand nombre inconnu) je termine juste en utilisant <Element>.scrollIntoView(), qui a bien fonctionné pour moi.

    Pour obtenir le <Element> objet que j'ai utilisé document.getElementById(), mais il ya beaucoup d'autres options sur la façon d'obtenir une poignée sur ce point.

    OriginalL'auteur azyth