如何解决仅在选项卡内容中添加滚动,而在“清晰度选项卡”中不添加选项卡标签
我在项目中有一个内容很长的选项卡(StackBlitz引用为here)。
所以出现滚动条。
对应的代码是
'.enc'
问题在于滚动条涵盖了标签标签和标签内容。但是我需要它仅覆盖标签内容,因此如果向下滚动,标签标签会保留下来。
我试图添加以下样式进行修复
<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>
但这导致滚动完全消失。如何只为标签内容添加滚动条?
解决方法
恐怕我无法从您的代码片段中得出足够的信息,因此请看一下Stackblitz中的代码。也就是说,Tab1和Tab2是类别为nav的无序列表中的列表元素。
将此导航项移出content-container div并将其放置在header-2标头元素的正下方,可以提供您所需的内容,content-container div会填充主容器的其余部分并滚动标签列表元素在上方保持固定。
这可能只是运气-因为所有必需的与柔韧性相关的设置都已经到位。
,我找到了以下解决方案。
我需要添加到父组件content-area
,其中包含所有选项卡的overflow
属性。
.content-area {
overflow: hidden ;
}
它将删除当前滚动条。 之后,我们可以使用Chrome开发工具找到上述元素的高度。
现在,我们应该将制表符内容包装到具有某个类(例如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;
}
它将仅为标签内容添加滚动。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。