web-dev-qa-db-fra.com

Comment utiliser content.scrollTo () pour ion-scroll dans ionic2?

J'essaie de faire défiler vers une position fixe, par exemple scrollTo (500, 20). Disons que vous êtes sur un appareil dont la largeur est de 300 pixels. La cible de défilement est maintenant hors de la portée de l'écran, vous devez faire défiler vers la droite.

J'ai résolu ceci en procédant comme suit:

<ion-content>
    <ion-scroll scrollX="true" style="width:100%; height:100%; white-space: nowrap; ">
        <div style="width:1000px; ">
            [box1] [box2] [box3] [...]
        </div>
    </ion-scroll>
</ion-content>

Jusque là tout va bien. Le problème commence si je veux sauter 500 pixels vers la droite en appuyant sur un bouton, par exemple. Glisser vers la droite fonctionne. Je sais qu'il existe une fonction permettant de faire cela pour <ion-content>:

@ViewChild(Content) content: Content;
[...]
this.content.scrollTo(500, 500, 500);

Cela ne fonctionne malheureusement pas dans mon cas. Je pense que le problème est que le contenu est lié à la taille du périphérique, de sorte que la méthode scrollTo () n'a pas d'effet sur <ion-scoll>. Comment utiliser la méthode scrollTo () pour <ion-scroll> au lieu de <ion-content>? 

Merci pour toute aide!

angulartypescriptionic-frameworkionic2ionic3
14
Tobias Bambullis

Comment puis-je utiliser la méthode scrollTo () pour <ion-scroll> au lieu de <ion-content>?

Je travaille toujours sur la façon d'animer le parchemin, mais au moins cela peut être considéré comme une solution à votre scénario. S'il vous plaît jeter un oeil à ce plunker .

Comme nous ne pouvons pas utiliser leion-content pour le défilement, j’ai pensé à obtenir l’instance du Scroll, puis à accéder à l’élément scroll intérieur html, puis à utiliser la propriété element.scrollLeft pour faire défiler cet élément:

La propriété element.scrollLeft obtient ou définit le nombre de pixels que le contenu d'un élément défile vers la gauche.

Donc, dans le code du composant:

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

@Component({...})
export class HomePage {
  @ViewChild('scroll') scroll: any;

    constructor() {}

    public backToStart(): void {
      this.scroll.scrollElement.scrollLeft = 0;
    }

    public scrollToRight(): void {
      this.scroll.scrollElement.scrollLeft = 500;
    }

}

Et dans la vue:

<ion-content padding>
  <ion-scroll #scroll scrollX="true" style="width:100%; height:150px; white-space: nowrap;">
        <div  style="width:1000px;">
            <div style="display:inline-block;height:100px;width:100px;border:1px solid black;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid red;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid blue;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid green;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid grey;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid brown;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid yellow;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid orange;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid pink;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid Violet;"></div>
        </div>
    </ion-scroll>

    <button (click)="backToStart()" ion-button text-only>Go to start</button>
    <button (click)="scrollToRight()" ion-button text-only>Scroll to right!</button>
</ion-content>

En faisant this.scroll.scrollElement.scrollLeft = 500;, nous pouvons faire défiler le contenu de l'ion-scroll 500px vers la droite. Nous pouvons ensuite revenir au début en faisant this.scroll.scrollElement.scrollLeft = 0;.

8
sebaferreras

En faisant défiler le contenu

@ViewChild(Content) content: Content;
  this.content.scrollTo

Par id #scroll

@ViewChild('scroll') scroll: any;  
this.scroll.scrollElement.scrollLeft = 500;

Cette méthode ci-dessus fonctionne bien pour le défilement haut-bas, mais dans le cas horizontal/scrollX ne fonctionne pas, donc, par le code ci-dessous, je résous ma solution, espérons que cela vous aidera.

TypeScript 

scrollmain(elementId, index) {
   console.info('elementId', elementId)
   var el = document.getElementById(elementId);
   el.scrollIntoView({ behavior: "smooth" });
}

HTML

<ion-scroll #scroll scrollX="true" style="width:100%;white-space: 
          nowrap; height: 60px">
    <ion-segment *ngIf="mcqdata" color="appmaincolor">
        <ion-segment-button *ngFor="let mcq of mcqdata; let i=index;" [id]="mcq.ques_id" value="{{mcq.ques_id}}" (ionSelect)="scrollmain(mcq.ques_id,i)"
            [ngClass]="{'active': selectedIdx == i}">
            <strong>Queastion{{i+1}}</strong>
        </ion-segment-button>
    </ion-segment>
</ion-scroll>
6
Manoj Bhardwaj

Pour ajouter aux réponses ci-dessus, cela gérera le défilement en douceur.

Nommez l'élément scroll dans votre .html

<ion-scroll #scroll>

Importer le parchemin.

import { Scroll } from 'ionic-angular';

Référencez le scroller dans le .ts

@ViewChild('scroll') scroll: any;

Ajoutez ce code là où c'est nécessaire:

this.scroll._scrollContent.nativeElement.scrollTo({ left: 0, top: 0, behavior: 'smooth' });

J'espère que ça aide quelqu'un.

2
Blueberry

Vous pouvez remplacer this.content.scrollTo(...) par this.content._scrollContent.nativeElement.scrollTo(...)

0
Muhammad Shahzad Anjum

Pourquoi n'obtenez-vous pas les dimensions de l'élément que vous souhaitez faire défiler en premier? Attribuez un identifiant à votre ion-scroll en fichier html, puis vous pouvez utiliser cette fonction :

scrollToElement(id) { 
    var el = document.getElementById(id);
    var rect = el.getBoundingClientRect();
    // scrollLeft as 0px, scrollTop as "topBound"px, move in 800 milliseconds
    this.content.scrollTo(0, rect.top, 800);
}

From this documentation : Valeur renvoyée par getBoundingClientRect propriétés gauche, haut, droite, bas, x, y, largeur, hauteur décrivant la zone de bordure en pixels. Les propriétés autres que la largeur et la hauteur sont relatives au coin supérieur gauche de la fenêtre.

En regardant votre code, je ne pense pas que vous ayez besoin d'ion-scroll, vous devriez pouvoir attribuer un identifiant à votre div et obtenir le résultat souhaité.

0
Ari