web-dev-qa-db-ja.com

Angular 4でクリックして要素までスクロールします

ボタンを押したときにターゲットまでスクロールできるようにしたい。私はこのようなことを考えていました。

<button (click)="scroll(#target)">Button</button>

そして私のcomponent.tsではのようなメソッド。

scroll(element) {
    window.scrollTo(element.yPosition)
}

上記のコードは有効ではないことを知っていますが、私が考えていたことを示すためだけのものです。 Angularの経験がなくてもAngular 4を習い始めたばかりです。私はこのようなものを探し回っていましたが、すべての例はAngularJにあり、Angular 4とは異なります

javascripthtmlangulartypescript
58
user7136957

あなたはこれのようにそれをすることができました：

<button (click)="scroll(target)"></button>
<div #target>Your target</div>

そしてあなたのコンポーネントで：

scroll(el: HTMLElement) {
    el.scrollIntoView();
}

編集：要素が未定義であるため、これは機能しなくなったというコメントが表示されます。 Angular 7に StackBlitzの例 を作成しましたが、それでも機能します。誰かがうまくいかない場合の例を教えてください。

93
Frank Modica

これがAngular 4を使ったやり方です。

テンプレート

<div class="col-xs-12 col-md-3">
  <h2>Categories</h2>
  <div class="cat-list-body">
    <div class="cat-item" *ngFor="let cat of web.menu | async">
      <label (click)="scroll('cat-'+cat.category_id)">{{cat.category_name}}</label>
    </div>
  </div>
</div>

この関数をコンポーネントに追加します。

scroll(id) {
  console.log(`scrolling to ${id}`);
  let el = document.getElementById(id);
  el.scrollIntoView();
}
24
LH7

実際には、setTimeout、requestAnimationFrame、またはjQueryを使用せずにこれを達成するための純粋なjavascriptの方法があります。

つまり、scrollViewでスクロールしたい要素を見つけて、scrollIntoViewを使用します。

el.scrollIntoView({behavior:"smooth"});

これが plunkr です。

22
Jon

このパーティーには少し遅れましたが、私はAngular 4+のためのプラグインを書きました。それはあなたがぶつかるかもしれない他の問題をカバーします、サーバーサイドレンダリングのように。あなたの好みに合わせてスクロールするようにアニメーション化することもできます。完全な開示、私は作者です。

NPM：@ nicky-lenaers/ngx-scroll-to

GitHub：@ nicky-lenaers/ngx-scroll-to

これがあなたを助けてくれることを願っています！

15
Nicky

Jonは正しい答えを持っています。これは私の5つか6つのプロジェクトでうまくいきます。

クリックしてナビゲーションバーからフッターにスムーズにスクロールするには、次の手順を実行します。

<button (click)="scrollTo('.footer')">ScrolltoFooter</button>
<footer class="footer">some code</footer>

scrollTo(className: string):void {
   const elementList = document.querySelectorAll('.' + className);
   const element = elementList[0] as HTMLElement;
   element.scrollIntoView({ behavior: 'smooth' });
}

フッターからヘッダーにスクロールバックしたいので、この関数が置かれているサービスを作成し、それをナビゲーションバーコンポーネントとフッターコンポーネントに挿入し、必要に応じて 'header'または 'footer'を渡しました。実際にコンポーネント宣言に使用されているクラス名を付けることを忘れないでください。

<app-footer class="footer"></app-footer>
11
Stephen E.

角度7で完璧な作品

HTML

<button (click)="scroll(target)">Click to scroll</button>
<div #target>Your target</div>

コンポーネント内

  scroll(el: HTMLElement) {
    el.scrollIntoView({behavior: 'smooth'});
  }
8
Robert S.

角度ではViewChildとElementRefを使うことができます：あなたのhtml要素にrefを与える

<div #myDiv >

そしてあなたのコンポーネントの中に：

import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('myDiv') myDivRef: ElementRef;

あなたはthis.myDivRef.nativeElementを使ってあなたの要素に到達することができます

3
M.Amer

Angularでそれを行う別の方法：

マークアップ：

<textarea #inputMessage></textarea>

ViewChild（）プロパティを追加します。

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

ScrollIntoView（）関数を使用して、コンポーネント内の任意の場所にスクロールします。

this.inputMessageRef.nativeElement.scrollIntoView();
3
Schnapz