在 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中文網其他相關文章！