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的父容器元素来补偿负的子边距。

＆＃13;

＆＃13;

.container {
    width:100px;
    padding-right:10px;
}
ul {
    max-height:100px;
    overflow-y:scroll;
    background-color:yellow;
}
.list-one {
}
.list-two {
    margin-right:-10px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;