Sticky tab bar with Fluent UI's Pivot

Question

I am building a tabbed environment using Fluent UI's Pivot component. Some of the tabs (or PivotItems in Fluent UI parlance) are quite long and need to be scrollable. Is there a way of having the tab bar be sticky such that it stays on top of the frame and visible no matter where the user scrolls to on the tab?

Answer 1

To get expected behavior you just need some CSS.

Set height of body and html to 100vh, and overflow: hidden to avoid multiple scrollbars.

body, html {
  height: 100vh; /* Viewport height */
  overflow: hidden; /* To avoid multiple scrollbars */
}

As a working example I'm gonna use Links of large tab style. Content of every item renders inside PivotItem Component. So, you have to put some styles on it:

const pivotItemStyles = {
  height: 'calc(100vh - 44px)',
  overflow: 'auto',
}

PivotTabs by default uses height: 44px that's the reason why I put calculate inside height property. overflow: auto is to get scrollable content. Reference: Pivot.styles.ts

Codepen working solution