html - overflow-y : scroll not working, 显示样式但无法滚动？

Question

我的代码很简单:

.list {
    margin: auto;
    height: 285px;
    width: 300px;
    overflow-y: scroll;
}

<div class="list">
  <ul>
    <li>hello world</li>
    <li>hello jupiter</li>
    <li>hello mars</li>
  </ul>
</div>

它在侧面显示了卷轴的样式，但缺少用于上下移动的卷轴？

Answer 1

无需滚动。

只有当 div 中的内容需要滚动才能看到 ul 中的更多元素时，浏览器才会滚动。要使滚动条仅在需要时出现，您可以使用 overflow-y: auto。

你隐含地告诉浏览器显示滚动条，即使它不需要这么小的 ul 元素。尝试添加更多元素以查看滚动条是否正常工作。

.list {
    margin: auto;
    height: 285px;
    width: 300px;
    overflow-y: auto; /* This changed */
}


<div class="list">
    <ul>
        <li> hello world </li>
        <li> hello jupiter </li>
        <li> hello mars </li>
        <li> hello world </li>
        <li> hello world </li>
        <li> hello world </li>
        <li> hello world </li>
        <li> hello world </li>
        <li> hello world </li>
        <li> hello world </li>
        <li> hello world </li>
        <li> hello world </li>
        <li> hello jupiter </li>
        <li> hello mars </li>
    </ul>
</div>

删除其中一些 li 元素将导致滚动条收缩，直到不再需要为止。