gpt4 book ai didi

html - overflow-y 自动隐藏内容

转载 作者:太空宇宙 更新时间:2023-11-04 11:43:25 25 4
gpt4 key购买 nike

使用 overflow-y:auto

enter image description here

使用 overflow-y:scroll

enter image description here

是否有某种方法可以在滚动条溢出时设置滚动条(并且不隐藏内容),但同时在滚动条没有溢出时将其移除?

当前的CSS:

  max-height: 400px;
overflow-y: scroll;
overflow-x: hidden; <-- do not want horizontal scroll under any circumstances, want the div to respond to the content

最佳答案

您可以尝试在您的列表中使用负 margin-right 和具有正 padding-right 的父容器元素来补偿负子边距。

.container {
width:100px;
padding-right:10px;
}
ul {
max-height:100px;
overflow-y:scroll;
background-color:yellow;
}
.list-one {
}
.list-two {
margin-right:-10px;
}
<div class="container">
<ul class="list-one">
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
<ul class="list-two">
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>

关于html - overflow-y 自动隐藏内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31160789/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com