web-dev-qa-db-ja.com

クリックされたときに要素をスクロールして表示する方法

たとえば、ボタンをクリックしたときに使用するIonic2内で scrollIntoView() に似たものを探しています。

ion-content ヘルプ。

angulartypescriptionic-frameworkionic2ionic3
10
user1275105

この作業プランカーをご覧ください

scrollTo(x,y,duration)メソッド （docs） を使用できます。コードは非常に単純です。最初にターゲット要素の位置（この場合は_<p></p>_）を取得し、それをscrollTo(...)メソッドで使用します。最初のビュー：

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

そしてコンポーネントコード：

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

上記のソリューションは、Angularユニバーサルサーバー側レンダリング（SSR）ではうまく機能しないことに気付きました。これは、documentがサーバー側で利用できないためです。

したがって、Angular 4+でAoTおよびSSRで機能する要素へのスクロールを実現する便利なプラグインを作成しました

NPM
ngx-scroll-to

GitHub
ngx-scroll-to

1
Nicky

私はこれをIonic 3で、そして_<Element>.offsetTop_が戻ってきたという事実のために_10_（要素の上部のパディング）の代わりにページの一番上（はるかに大きな未知数）私は<Element>.scrollIntoView()を使用することになりました。

_<Element>_オブジェクトを取得するためにdocument.getElementById()を使用しましたが、そのハンドルを取得する方法には他にも多くのオプションがあります。

1
azyth

HTMLでアンカーリンクを使用します。

Elemntとid = "scrollXYZ"を指定して、ボタンを

例：

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

Ion-content shouldには、特定の子要素にスクロールするためのメソッドがありますが、深くなります。現在のメソッドは大丈夫ですが、ionicの目的の1つの観点は、document.getElementByIdのような面倒で退屈なコードを廃止することです。

また、メソッドにはスクロールアニメーションの制御もありません。

したがって、現在のところ、最良のオプションはscrollIntoViewメソッドです。スクロールする要素にidを付加し、getElementbyIDを使用してscrollIntoViewを呼び出します。そう：

。html

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

...

</ion-row>

ts

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

次に、DOMイベントまたはボタンのクリック時にメソッドを呼び出します。要素が条件付きの場合、これはおそらく機能しません。代わりに、条件付きのhidden属性を使用するか、またはngIfを使用する必要がある場合は、要素が最初に挿入されるようにロジックの時間を調整します。

他のさまざまなionic（4）UIコンポーネントでこれを試しましたが、正常に動作します。

0
Jai Preston

_Ionic 4_では、スクロール関数の名前がscrollToPoint()に変更されました。

Screenshot from Ionic docs

0
Sinandro