【问题标题】:How to scroll to bottom on click in angular如何在角度单击时滚动到底部
【发布时间】:2022-01-04 12:34:29
【问题描述】:

我想在点击时滚动到底部,我尝试使用scrollIntoView,它滚动到页面的一半而不是div的部分

.ts 文件

@ViewChild("serviceBox", {static: false}) private serviceBox: ElementRef;

showService() {
 setTimeout(() => {
        this.serviceBox.nativeElement.scrollIntoView({behavior: 'smooth'})
    });
}
 

.HTML

 <div class="row" [style.display]="commonService.showService ? 'block' : 'none'">
        <div class="col-md-12">
            <div class="ticket__box" #serviceBox>
            <app-service-details [contractId]="contractId" [contactId]="contactId" [memberID]="memberID" [serviceId]="commonService.serviceId"></app-service-details>
        </div>
        </div>
       
    </div>

【问题讨论】:

  • 您想滚动到页面底部,还是滚动到#serviceBox div?
  • 到#serviceBox div
  • 我发布了答案。可以试试吗?

标签: javascript html angular typescript


【解决方案1】:

你可以这样做:

showService() {
  let position = document.getElementById("serviceBox").getBoundingClientRect().top + window.scrollY - 25;
  window.scrollTo({ top: position, behavior: 'smooth' });
}

【讨论】:

  • 我没有带有 id 导航栏的 div
  • 哦,对不起,它从我的代码中消失了。我更新了我的答案。你能再试一次吗?
  • 第一次点击无效,第二次点击有效
猜你喜欢
  • 1970-01-01
  • 2019-10-26
  • 1970-01-01
  • 1970-01-01
  • 2020-08-19
  • 2016-12-07
  • 2014-12-12
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多