0

ビューにある場合にのみコンテンツをロードする遅延読み込みでページを最初にロードするときに、コンポーネントを表示しようとしています。例: - ページには 10 個のコンポーネントがあり、(パフォーマンスのために) 遅延読み込みを使用して最初の読み込みでコンポーネント番号 7 を表示/スクロールしたい。

これを正しく行うにはどうすればよいですか？ここでの課題は、これらのコンポーネントが遅延読み込みであり、scrollIntoView() を台無しにし、コンポーネントを通過して一番上までスクロールしすぎる巨大な画像を持っているためです。

  • 私はこれらのアプローチを試しましたが、運がありません:(
  • コンポーネント 7 への参照を配置します。
    1. scrollIntoView() でそのコンポーネントまでスクロールします。ナビゲーション バーには window.scrollBy(0, -100) を使用します。
    2. コンポーネント offsetTop を取得し、window.scrollTo(0, targetComponent.offsetTop - 100); を使用します。
    3. 上記の両方のアプローチですが、2s - 5s の setTimeout ではどちらも機能しませんでした。
    4. scrollIntoView() を使用してコンポーネントにスクロールし、setTimeout で数秒待ってから window.scrollBy(0, -100) で再度 scrollIntoView() を使用しても機能しませんでした。
    5. 画像コンテナーに固定の高さ (例: 500px) を指定すると、画像の遅延読み込みによってコンテナーがいっぱいになりますが、コンポーネントが他のページで使用されている場合、より大きなサイズの画像 (例: 1200px) を取得すると、UI が台無しになります。 .
    6. window.scrollY、window.pageYOffset、getBoundingClientRect().top、および必要な高さを取得するためのこれらの値は、コードの console.log とブラウザーの値を比較したコードとは異なるため、計算が正しくありません。
    7. scrollIntoView({ block: 'start' }) と window.scrollBy(0, -100) も機能しませんでした。window.scrollBy(0, -100)を使用したにもかかわらず、一番上までスクロールしてナビゲーションバーを通過しました。これでもsetTimeoutを試してみました。

私が試したこのようなものですが、コンポーネントはまだスクロールしすぎています。

<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<div>Div 5</div>
<div>Div 6</div>
<div #target>Target Div 7</div>
<div>Div 8</div>
<div>Div 9</div>
<div>Div 10</div>

export class BBQComponent implements AfterViewInit {
  @ViewChild("target") targetElement: ElementRef;

  ngAfterViewInit() {
    setTimeout(_ => {
     this.targetElement.nativeElement.scrollIntoView({block: "start"});
     window.scrollBy(0, -100);
    }, 2000); 
  }
}

ページが最初にアクセスしたときに、ナビゲーション バーのすぐ下 (高さ約 100px) にコンポーネントが表示されることを期待しています。私は解決策を探し、さまざまなことを試しましたが、まだこれに固執しています。

この機能 scrollIntoView を遅延読み込みコンテンツで動作させるために見逃したものはありますか? ありがとう！！

4

2 に答える 2