带有Fluent UI的数据透视的粘性标签栏

问题描述

我正在使用Fluent UI的Pivot组件构建一个选项卡式环境。一些选项卡（或Fluent UI用语中的PivotItems）很长，需要滚动。有没有一种方法可以使标签栏保持粘性，从而无论用户在标签上的何处滚动，标签栏都可以停留在框架的顶部并且可见？

解决方法

要获得预期的行为，您只需要一些CSS。

将height和body中的html设置为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

Codepen working solution