scrollIntoView() angular 7 不滚动

Question

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

我尝试了以下方法：

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()，但我认为这总是 returns undefined，因为 <app-portfolio-slider> 尚未呈现。

我需要做什么才能顺利进行滚动？

Answer 1

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

scrollIntoView() angular 7 不滚动

scrollIntoView() angular 7 not scrolling

angular

typescript

js-scrollintoview