Angular 4 | window.scrollTo(); 工作不正常

Abh*_*nth 9 html javascript html5 typescript angular

目前,我正在尝试自动滚动到我在我的Typescript中使用的HTML页面的顶部.

 window.scrollTo(0 , 0);
Run Code Online (Sandbox Code Playgroud)

并尝试自动向下滚动到HTML页面的底部

 window.scrollTo( 0 , document.body.scrollHeight);
Run Code Online (Sandbox Code Playgroud)
  • 我试图在HTTP响应后滚动顶部.

 openPDFVievwer(data) {
  this.obj= JSON.parse(data._body);
  document.getElementById('spinner').style.display = 'none';
  window.scrollTo( 0 , 0);
}
Run Code Online (Sandbox Code Playgroud)
  • 当我在渲染另一个组件后尝试滚动底部时.

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

但是,两者似乎都没有用.

有什么我做错了吗?

Sha*_*mor 13

试试html

<div #list [scrollTop]="list.scrollHeight"></div>
Run Code Online (Sandbox Code Playgroud)

解决方案2

在Component中将id定义为html id="scrollId"

const element = document.querySelector('#scrollId');
element.scrollIntoView();
Run Code Online (Sandbox Code Playgroud)

  • 实际上,你的第二个解决方案对我有用.但略有修改.我使用`document.getElementById`而不是querySelector.谢谢 :) (3认同)