web-dev-qa-db-ja.com

ionic2のイオンスクロールにcontent.scrollTo（）を使用するにはどうすればよいですか？

ScrollTo（500、20）などの固定位置にスクロールしようとしました。幅が300ピクセルのデバイスを使用しているとしましょう。スクロールターゲットは画面の範囲外になりました。右にスクロールする必要があります。

私はこれを次のようにして解決しました。

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

ここまではすべて順調です。たとえば、ボタンを押して500ピクセル右にジャンプしたい場合、問題が始まります。右にスワイプすると動作します。 <ion-content>に対してこれを行う関数があることを知っています。

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

残念ながら、これは私の場合はうまくいきません。問題は、コンテンツがデバイスのサイズに関連しているため、scrollTo（）メソッドが<ion-scoll>に影響を与えないことだと思います。 <ion-scroll>の代わりに<ion-content>にscrollTo（）メソッドを使用するにはどうすればよいですか？

助けてくれてありがとう！

angulartypescriptionic-frameworkionic2ionic3
15
Tobias Bambullis

<ion-scroll>の代わりに<ion-content>にscrollTo（）メソッドを使用するにはどうすればよいですか？

私はまだスクロールをアニメーション化する方法に取り組んでいますが、少なくともこれはあなたのシナリオの解決策として考えられるかもしれません。 this plunker をご覧ください。

スクロールにtheion-contentを使用できないため、Scrollのインスタンスを取得してから、内側のhtml scroll要素にアクセスし、 element.scrollLeft プロパティを使用してスクロールするその要素：

Element.scrollLeftプロパティは、要素のコンテンツが左にスクロールされるピクセル数を取得または設定します。

コンポーネントコードで：

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

}

ビューで：

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

this.scroll.scrollElement.scrollLeft = 500;、を実行すると、イオンスクロール500pxのコンテンツを右にスクロールできます。その後、this.scroll.scrollElement.scrollLeft = 0;を実行することにより、最初に戻ることができます。

9
sebaferreras

コンテンツのスクロールによる

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

ID #scrollで

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

上記のこのメソッドは上下スクロールでうまく機能していますが、水平/ scrollXが機能していない場合はコードの下で解決すると私のソリューションがあなたに役立つことを願っています。

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

上記の答えに追加するために、これはスムーズなスクロールを処理します。

.htmlのスクロール要素に名前を付けます

<ion-scroll #scroll>

スクロールをインポートします。

import { Scroll } from 'ionic-angular';

.tsでスクローラーを参照します

@ViewChild('scroll') scroll: any;

必要な場所にこのコードを追加します。

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

それが誰かを助けることを願っています。

2
Blueberry

this.content.scrollTo(...)をthis.content._scrollContent.nativeElement.scrollTo(...)に置き換えることができます

0
Muhammad Shahzad Anjum

最初にスクロールする要素の寸法を取得しないのはなぜですか？ HTMLファイルのイオンスクロールにIDを割り当てると、 この関数を使用 ：

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 このドキュメント ：境界ボックスをピクセル単位で記述するgetBoundingClientRect left、top、right、bottom、x、y、width、heightプロパティの戻り値。幅と高さ以外のプロパティは、ビューポートの左上を基準にしています。

あなたのコードを見ると、私はあなたがイオンスクロールを必要とは思わない、あなたはただあなたのdivにidを割り当てて、あなたが望む結果を得ることができるはずです。

0
Ari