仅为选项卡内容添加滚动，但不为 Clarity 选项卡中的选项卡标签添加滚动

Question

我在项目中有一个内容很长的选项卡（StackBlitz ref 是 here）。

所以卷轴出现了。

对应的代码是

<div class="content-container">
        <div class="content-area">

            <clr-tabs>
                <clr-tab>
                    <button clrTabLink id="tab1-link">Tab1</button>
                    <clr-tab-content id="tab1-content" *clrIfActive="true">
                        ...
                    </clr-tab-content>
                </clr-tab>
                <clr-tab>
                    <button clrTabLink id="tab2-link">Tab2</button>
                    <clr-tab-content id="tab2-content" *clrIfActive>
                        Content2
                    </clr-tab-content>
                </clr-tab>
            </clr-tabs>

        </div>
    </div>

问题是滚动覆盖了选项卡标签和选项卡内容。但我需要它只覆盖选项卡内容，这样如果我向下滚动，选项卡标签就会保留。

我尝试添加以下样式来修复它

.content-area {
  overflow: hidden !important;
  height: 100%;
}

#tab1-content, #tab2-content {
  height: 100%;
  overflow: auto;
}

但这导致滚动完全消失。如何仅为选项卡内容添加滚动条？

Answer 1

恐怕我无法从您的代码片段中得出足够的结论，因此查看了 Stackblitz 中的代码。其中，Tab1 和 Tab2 是具有 class nav.

的无序列表中的列表元素

将此导航从 content-container div 中移出并立即将其放在 header-2 header 元素下方可以满足您的需求， content-container div 填满主容器的剩余部分并滚动，Tab 列表元素在上方保持固定。

这可能只是运气 - 因为所有必需的 flex-related 设置都已经到位。

Answer 2

我找到了以下解决方案。我需要添加到包含 overflow 属性.

所有选项卡的父组件 content-area

.content-area {
  overflow: hidden ;
}

删除当前滚动条。之后我们可以使用 Chrome 开发工具找到上述元素的高度。

现在我们应该将选项卡内容包装到另一个 div 中，其中包含一些 class（例如 mytab-content）。

    <clr-tab-content id="tab1-content" *clrIfActive="true">
        <div class="mytab-content">
        .......
        </div>
    </clr-tab-content>

最后我们应该为此添加以下样式 class

.mytab-content {
  height: calc(100vh - 60px - 36px);
  overflow: auto;
}

它只会为选项卡内容添加滚动。

仅为选项卡内容添加滚动，但不为 Clarity 选项卡中的选项卡标签添加滚动

Add scroll only for a tab content but not for a tab label in Clarity Tabs

css

scroll

angular

vmware-clarity