angular2でのスクロールトップ

私はangular2のWebアプリケーションに取り組んでいますが、以下の点で助けが必要です。 私のページは複数のコンポーネントで構成されています。ユーザーがボタンをクリックしたときに、ページの上部をスクロールさせたいと思います。私は試しました document.body.scrollTop = 0;` ですが、これはChromeでは動作しません。document.documentElement.scrollTop=0;window.scrollTo(0, 0);を試してみましたが、うまくいきません。

Pardeep Jain
編集された質問 29日 4月 2017 в 5:36
プログラミング
javascript angular angular2-routing typescript
29日 4月 2017 в 5:31
まだビューはありません
質問へのコメント (5)

のようにインポートします、

import { Inject} from "@angular/core";
import { DOCUMENT } from '@angular/platform-browser';

コンストラクタに以下を追加します、

constructor(@Inject(DOCUMENT) private document: Document) { }

そうすると、このように任意の場所にスクロールを設定することができます、

this.document.body.scrollTop = 0;
解説 (8)

データバインディングを使って、angularのスクロールの問題を解決しました：

<div class="container" [scrollTop]="scrollTop"> ... </div>

をスタイルとする：

.container {
  height: 100%;
  scroll: auto;
  position: relative;
}
解説 (1)

使用するだけ:

window.scroll(0, 0);
解説 (0)

app.component.ts内

const mainDiv = document.getElementById('mainDIV');
mainDiv.scrollTop = 0;

app.component.html内

<div id="mainDIV" style="height: 100vh;overflow: auto;">



</div>
解説 (0)

そのための指令を書くことを提案します。 使用しているモジュールにインポートしてください。

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[scrollToTop]'
})
export class ScrollToTopDirective {
  @HostListener('click')
  public onClick() {
    if (window && window.pageYOffset) {
      window.scroll(0, 0);
    }
  }
}

以下のように使用します。

Scroll to Top

また、Angularのベストプラクティスに準拠して、プレフィックスをディレクティブに追加することを検討してください。

https://angular.io/guide/styleguide#directive-custom-prefix。

Viktor Soroka
編集した答え 27日 8月 2018 в 6:28
解説 (2)

以下のコードを使用してください。 私の場合。

this.document.body.scrollTop = 0

動作していませんが。

this.document.documentElement.scrollTop = 0

作業。 したがって、ブラウザに依存している可能性があります。

import { Inject} from "@angular/core";
import { DOCUMENT } from '@angular/platform-browser';

constructor(@Inject(DOCUMENT) private document: Document) { }
this.document.documentElement.scrollTop = 0;
解説 (0)

htmlコード:

<div class="scroll-to-top" [ngClass]="{'show-scroll': navIsFixed}">

                Top

        </div>

cssコード:

.scroll-to-top {
    position: fixed;
    bottom: 15px;
    right: 15px;
    opacity: 0;
    transition: all .2s ease-in-out;
}

.show-scroll {
    opacity: 1;
    transition: all .2s ease-in-out;
}

tsコード:

import {Component, OnInit, Inject, HostListener} from '@angular/core';
import { DOCUMENT } from "@angular/platform-browser";
import { BrowserModule } from '@angular/platform-browser';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hard Hitter@Cool';
  navIsFixed: boolean;
  constructor(@Inject(DOCUMENT) private document: Document){

  }
  @HostListener("window:scroll", [])
  onWindowScroll() {
      if (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop > 100) {
          this.navIsFixed = true;
      } else if (this.navIsFixed && window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop < 10) { this.navIsFixed = false; } } scrollToTop() { (function smoothscroll() { var currentScroll = document.documentElement.scrollTop || document.body.scrollTop; if (currentScroll > 0) {
              window.requestAnimationFrame(smoothscroll);
              window.scrollTo(0, currentScroll - (currentScroll / 5));
          }
      })();
  }

}
解説 (0)

ウィンドウスクロールではなく、自分のスクロールでdivを実行する場合、これは機能します。

GloabalサービスWindowRef:

import { Injectable } from '@angular/core';

function _window(): any {
  // return the global native browser window object
  return window;
}

@Injectable()
export class WindowRef {
  get nativeWindow(): any {
    return _window().document;
  }
}

コンストラクタに追加します。

constructor(private winRef: WindowRef) {}

そして、コードを配置する場合は、次の行を追加するだけです。

this.winRef.nativeWindow.getElementsByClass('nameOfClass')[0].scroll(0, 0);

もちろん、getElementByTagName、getElementById、getElementByNameなどの他のセレクターを使用することもできます。 ...

解説 (0)

この引数をコンストラクターに挿入します: @ Inject(DOCUMENT)プライベートドキュメント:ドキュメント。

次に、「scrollIntoView」関数を呼び出します。

。 this.document.body.sc rollIntoView({。 ブロック:「開始」、 動作:「スムーズ」。 });。 。

いいよ。!! :)。

解説 (0)