html - overflow-y 自动隐藏内容

Question

使用 overflow-y:auto

使用 overflow-y:scroll

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

当前的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

Answer 1

您可以尝试在您的列表中使用负 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>