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

您可以通过降低高度来获得它，如下所示

.list {
  margin: auto;
  height: 70px;  /* Reduse height */
  width: 300px;
  overflow-y: scroll;
}

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

Answer 2

无需滚动。

只有在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元素会导致滚动条缩小，直到不再需要它为止。

Answer 3

你设置了285像素的高度，这对于三个列表元素来说已经足够了。

如果您将高度降低到50 px或只是在div中添加更多内容，滚动条就会变为活动状态。

请参阅https://jsfiddle.net/ppk10zf9/

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

和

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

overflow-y：滚动不工作，显示样式但无法滚动？

3 个答案: