Angularでのタブ変更時のスクロール状態の保持

マルチタブの Angular アプリケーションを開発しているときに、ユーザーがタブ間を切り替えたときにスクロールを維持する方法という課題に遭遇しました。この機能は、ユーザー エクスペリエンスを向上させ、ユーザーがタブ間を移動するときに中断したところから続行できるようにするために不可欠です。

このブログ投稿では、この機能をプロジェクトに追加する方法を段階的に説明します。これは、個々のタブのスクロール位置を維持するためのシンプルかつ効果的な方法です。

質問

デフォルトでは、通常、タブを切り替えるとコンテンツが再ロードされ、スクロール位置がリセットされます。この動作は、特に長いリストやデータ量の多いページを閲覧する場合に、ユーザーにとってイライラする可能性があります。この問題を解決するには、次のものが必要です:

1. 切り替える前に現在のタブのスクロール位置を保存します。
2. ユーザーがタブに戻ったときにスクロール位置を復元します。

解決策

window.scrollY を使用して、現在の垂直スクロール位置をキャプチャし、それを状態オブジェクトに保存できます。ユーザーがタブに戻ると、保存された場所が取得されて復元されます。

これを段階的に行う方法は次のとおりです:

1. スクロール状態管理を設定します

各ラベルのスクロール位置を追跡するプロパティを作成します。

<code class="language-typescript">export class TabComponent {
  activeTab: string = 'tab1';
  tabScrollStates: { [key: string]: number } = {};

  onTabChange(newTab: string): void {
    // 保存活动标签的当前滚动位置
    this.tabScrollStates[this.activeTab] = window.scrollY || 0;

    // 更新活动标签
    this.activeTab = newTab;

    // 恢复新标签的滚动位置
    const savedScrollPosition = this.tabScrollStates[newTab] || 0;
    // 延迟滚动恢复以确保DOM已更新为新的标签内容
    setTimeout(() => {
      window.scrollTo(0, savedScrollPosition);
    }, 0);
  }
}</code>

2. タグをロジックに接続します

テンプレートで、onTabChange メソッドをタグ選択イベントにバインドします。

<code class="language-html"><div>
  <button (click)="onTabChange('tab1')">Tab 1</button>
  <button (click)="onTabChange('tab2')">Tab 2</button>
</div>

<div *ngIf="activeTab === 'tab1'">
  <p>Tab 1 的内容 (这里可以有很多内容)</p>
</div>

<div *ngIf="activeTab === 'tab2'">
  <p>Tab 2 的内容 (这里也可以有很多内容)</p>
</div></code>

3. オプションの拡張機能

• デバウンス:デバウンスは、短期間に複数の保存操作を防止し、パフォーマンスのオーバーヘッドを削減し、ユーザーがタブをすばやく切り替えた場合の一貫した動作を保証します。
• 水平スクロール: 水平スクロールを維持するには、window.scrollX を使用します。

<code class="language-typescript">const savedHorizontalScroll = window.scrollX || 0;
setTimeout(() => {
  window.scrollTo(savedHorizontalScroll, savedScrollPosition);
}, 0);</code>

結論

スクロール位置を効果的に管理することで、Angular アプリケーションのユーザー エクスペリエンスを大幅に向上させることができます。このソリューションはシンプルかつ軽量で、より複雑なシナリオに簡単に拡張できます。

同様のスクロール管理手法を実装しましたか?以下のコメント欄であなたの洞察や改善点を共有してください。
コーディングを楽しんでください! ?

以上がAngularでのタブ変更時のスクロール状態の保持の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。