web-dev-qa-db-ja.com

Angular 4 | window.scrollTo（）;は正常に動作していません

現在、TypeScriptで使用しているHTMLページの一番上まで自動的にスクロールしようとしています。

 window.scrollTo(0 , 0);

hTMLページの下部まで自動的に下にスクロールしようとしているとき

 window.scrollTo( 0 , document.body.scrollHeight);
  • HTTP応答の後に上部をスクロールしようとしています。

コード

 openPDFVievwer(data) {
  this.obj= JSON.parse(data._body);
  document.getElementById('spinner').style.display = 'none';
  window.scrollTo( 0 , 0);
}
  • 別のコンポーネントをレンダリングした後、下にスクロールしようとしています。

コード

searchData(data) {
    this.document = data;
    this.searchResultDiv = true; // where component will be rendered
    window.scrollTo( 0 , document.body.scrollHeight);
  }

しかし、両方とも機能していないようです。

私が間違っていることはありますか？

javascripthtmlhtml5angulartypescript
9
Abhishek Ekaanth

htmlを試してください

<div #list [scrollTop]="list.scrollHeight"></div>

解決策2

コンポーネントでhtmlにIDを定義しますid="scrollId"

const element = document.querySelector('#scrollId');
element.scrollIntoView();
12
Shailesh Ladumor

angular 2 +の回答

それは非常に簡単です、ただ要素を作成するだけです

例えば<span id="moveTop"></span>または要素にただidを追加するか、既存のIDを使用します move top、down、midなど.

特定のイベントでこのメソッドを追加します。リストリストとして編集するときに一番上に移動したいなどです。

 gotoTop() {

   var scrollElem= document.querySelector('#moveTop');
   scrollElem.scrollIntoView();  
  }

または、パラメータとしてIDを送信する場合は、単にオプションのパラメータを作成するだけです

gotoTop(elementId?: string) {

    if (elementId != null) {
        var element = document.querySelector(elementId);
        element.scrollIntoView();
    } 
    else {
        var element = document.querySelector('#moveTop');
        element.scrollIntoView();
    }
}
1
Deva

上記の解決策は私のために働いていませんでした、これを試してみてくださいコード：

import { Router, NavigationEnd } from '@angular/router';
constructor(private router: Router)
ngOnInit()
   {
     this.router.events.subscribe((evt) => {
    if (!(evt instanceof NavigationEnd)) {
    return;
      }
  document.getElementsByTagName("app-website-nav")[0].scrollIntoView();
});
   }
1
aravind balaji