僅為選項卡內容添加滾動，但不為 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;
}

它只會為選項卡內容添加滾動。