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>

overflow-y 自动隐藏内容

overflow-y auto hides content

html

css

overflow