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

Question

我在项目中有一个包含很长内容的选项卡（StackBlitz 参考在这里）。

于是出现了卷轴。

它的对应代码是

<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 是具有类 nav 的无序列表中的列表元素。

将此导航移出内容容器 div 并立即将其放在 header-2 标题元素下方为您提供我认为您需要的内容，内容容器 div 填充了主容器的其余部分并随 Tab 列表元素滚动上面保持固定。

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

Answer 2

我找到了以下解决方案。 我需要将overflow属性添加到包含所有选项卡的父组件content-area 。

.content-area {
  overflow: hidden ;
}

它删除当前滚动条。 之后，我们可以使用 Chrome Dev Tools 找到上述元素的高度。

现在我们应该用某个类（例如mytab-content ）将选项卡内容包装到另一个 div 中。

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

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

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

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