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

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

質(zhì)問

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

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

解決策

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

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

1. スクロール狀態(tài)管理を設定します

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

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已更新為新的標簽內(nèi)容
    setTimeout(() => {
      window.scrollTo(0, savedScrollPosition);
    }, 0);
  }
}

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

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

<div>
  <button (click)="onTabChange('tab1')">Tab 1</button>
  <button (click)="onTabChange('tab2')">Tab 2</button>
</div>

<div *ngIf="activeTab === 'tab1'">
  <p>Tab 1 的內(nèi)容 (這里可以有很多內(nèi)容)</p>
</div>

<div *ngIf="activeTab === 'tab2'">
  <p>Tab 2 的內(nèi)容 (這里也可以有很多內(nèi)容)</p>
</div>

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

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

const savedHorizontalScroll = window.scrollX || 0;
setTimeout(() => {
  window.scrollTo(savedHorizontalScroll, savedScrollPosition);
}, 0);

結(jié)論

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

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

以上がAngularでのタブ変更時のスクロール狀態(tài)の保持の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。