While developing a multi-tab Angular application, I encountered a challenge - how to maintain scrolling when the user switches between tabs. This feature is essential to enhance the user experience, ensuring that users can continue where they left off when navigating between tabs.

In this blog post, I will show you step by step how to add this functionality to your project. This is a simple yet effective way to maintain the scroll position of individual tabs.

Question

By default, switching between tabs will usually reload the content, thus resetting the scroll position. This behavior can be frustrating for users, especially when browsing long lists or data-intensive pages. To solve this problem we need:

1. Save the scroll position of the current tab before switching.
2. Restore scroll position when user returns to tab.

Solution

We can use window.scrollY to capture the current vertical scroll position and save it in a state object. When the user navigates back to the tab, we retrieve and restore the saved location.

Here’s how to do it step by step:

1. Set scrolling state management

Create a property to track the scroll position of each label.

export class TabComponent {
  activeTab: string = 'tab1';
  tabScrollStates: { [key: string]: number } = {};

  onTabChange(newTab: string): void {
    // 保存活動(dòng)標(biāo)簽的當(dāng)前滾動(dòng)位置
    this.tabScrollStates[this.activeTab] = window.scrollY || 0;

    // 更新活動(dòng)標(biāo)簽
    this.activeTab = newTab;

    // 恢復(fù)新標(biāo)簽的滾動(dòng)位置
    const savedScrollPosition = this.tabScrollStates[newTab] || 0;
    // 延遲滾動(dòng)恢復(fù)以確保DOM已更新為新的標(biāo)簽內(nèi)容
    setTimeout(() => {
      window.scrollTo(0, savedScrollPosition);
    }, 0);
  }
}

2. Connect tags to logic

In your template, bind the onTabChange method to the tag selection event.

<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. Optional enhancements

• Debounce:Debounce prevents multiple save operations in a short period of time, reducing performance overhead and ensuring consistent behavior if the user switches tabs quickly.
• Horizontal scrolling: Use window.scrollX to preserve horizontal scrolling.

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

Conclusion

By effectively managing scroll position, you can greatly improve the user experience of your Angular application. This solution is simple, lightweight, and easily scalable to more complex scenarios.

Have you implemented a similar scroll management technique? Please share your insights and improvements in the comments below!
Happy coding! ?

The above is the detailed content of Preserving Scroll State on Tab Change in Angular. For more information, please follow other related articles on the PHP Chinese website!