时间戳

首页 > 解决方案 > scrollIntoView() 角度 7 不滚动

angular - scrollIntoView() 角度 7 不滚动

问题描述

我正在尝试在我的应用程序中实现从一个组件滚动到另一个组件，但目前它只是“跳转”到该组件，而不是滚动。

我尝试了以下方法：

export class HomeComponent implements OnInit {
  scroll(el: HTMLElement) {
      el.scrollIntoView({ block: 'start',  behavior: 'smooth', inline: 'nearest' });
  }

  constructor() {
  }

  ngOnInit() {
  }
}

这是我的模板：

<section class="bg-full bg-home">
  <div class="logo"></div>
  <a (click)="scroll(testPortfolio)" href="#portfolio" id="scroll-to-section">
    <img src="../../assets/arrow-scroll.svg" width="36">
  </a>
</section>
<app-about></app-about>
<app-portfolio-slider #testPortfolio></app-portfolio-slider>
<app-contact></app-contact>

或者，我也尝试过使用ViewChild()，但这总是undefined按我的假设返回，因为<app-portfolio-slider>尚未渲染。

为了使滚动顺利进行，我需要做什么？

标签： angulartypescriptjs-scrollintoview

解决方案

所以我的假设是不正确的。正如@arbghl在评论中提到的，作者只需要使用<div>具有scrollIntoView()方法的目标元素包装并将该 div 用作目标元素。希望有帮助。

推荐阅读