0

アプリケーションであるコンポーネントから別のコンポーネントへのスクロールを実装しようとしていますが、現時点ではコンポーネントに「ジャンプ」しているだけで、スクロールしていません。

私は次のことを試しました:

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>

スクロールをスムーズに行うにはどうすればよいですか?

4

1 に答える 1