web-dev-qa-db-fra.com

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

Cherche quelque chose de similaire à scrollIntoView() dans Ionic2 à utiliser lorsque je clique sur un bouton, par exemple.

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

angulartypescriptionic-frameworkionic2ionic3
9
user1275105

S'il vous plaît jeter un oeil à ce plongeur de travail

Vous pouvez utiliser la méthode scrollTo(x,y,duration)(docs) . Le code est assez simple, nous obtenons d’abord la position de l’élément cible (un <p></p> dans ce cas) et nous l’utilisons ensuite dans la méthode scrollTo(...) 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);
  }
}
11
sebaferreras

J'ai remarqué que la solution ci-dessus ne fonctionnait pas bien avec le rendu SSR (Angular Universal Render) côté serveur car document n'était pas disponible côté serveur.

J'ai donc écrit un plugin pratique pour faire défiler des éléments angulaires de 4+ qui fonctionnent avec AoT et SSR

MNP
ngx-scroll-to

GitHub
ngx-scroll-to

1
Nicky

J'utiliserais un lien anker en HTML.

Il suffit de donner elemnt et id = "scrollXYZ" et d’envelopper le bouton dans 

Exemple:

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

J'essayais de faire cela dans Ionic 3 et en raison du fait que <Element>.offsetTop retournait10 (le remplissage en haut de l'élément) au lieu de la distance au haut de la page (nombre inconnu beaucoup plus grand), je finis par utiliser simplement <Element>.scrollIntoView() , ce qui a bien fonctionné pour moi.

Pour obtenir l’objet <Element> j’ai utilisé document.getElementById(), mais il existe de nombreuses autres options pour obtenir un descripteur à ce sujet. 

0
azyth