office-ui-fabric - 带有 Fluent UI 的 Pivot 的粘性标签栏

Question

我正在使用 Fluent UI 的Pivot组件构建一个选项卡式环境。一些选项卡（或PivotItemsFluent UI 用语）很长，需要可滚动。有没有办法让标签栏保持粘性，无论用户滚动到标签的哪个位置，它都保持在框架的顶部并且可见？

score 1 · Accepted Answer

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

设置height和到100vh，并body避免多个滚动条。htmloverflow: 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

1 回答 1