带有 Fluent UI 轴心的粘性标签栏

Question

我正在使用 Fluent UI 的 Pivot 组件构建一个选项卡式环境。某些选项卡（或 Fluent UI 说法中的 PivotItems）非常长，需要可滚动。有没有一种方法可以使标签栏保持粘性，使其始终位于框架顶部并且无论用户滚动到标签上的哪个位置都可见？

Answer 1

要获得预期的行为，您只需要 CSS.

将 body 和 html 的 height 设置为 100vh，并 overflow: hidden 以避免出现多个滚动条。

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

作为一个工作示例，我将使用 Links of large tab style。每个项目的内容都在 PivotItem Component 内呈现。所以，你必须在上面添加一些样式：

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

PivotTabs 默认使用 height: 44px 这就是为什么我把计算放在内部高度属性的原因。 overflow: auto 是获取可滚动的内容。参考：Pivot.styles.ts

Sticky tab bar with Fluent UI's Pivot