Question

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

我尝试了以下方法：

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>。

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

Answer 1

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

scrollIntoView（）角度7不滚动

1 个答案: