overflow-y:滚动不起作用，显示样式，但无法滚动? [英] overflow-y: scroll not working, showing style but cannot be scrolled?

问题描述

我的代码很简单，像这样:

my code is simple like this:

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

它在侧面显示了滚动的样式，但是缺少您用来上下移动的滚动吗?

it shows style of a scroll on the side but lacking that scroll you use to move up and down?

推荐答案

无需滚动.

仅当 div 中的内容需要滚动才能在 ul 中查看更多项时，浏览器才会滚动.要使滚动条仅在需要时才出现，可以使用 overflow-y:auto .

The browser will only scroll if the content within the div needs to scroll in order to see more items in the ul. To make the scroll bar appear only if it needs to be there, you can use overflow-y: auto.

您隐式地告诉浏览器显示在滚动条上，即使不需要这么小的 ul 元素也是如此.尝试添加更多元素以查看滚动条是否正常工作.

You implicitly tell the browser to show to the scroll bar even though it's not needed with such little ul elements. Try adding more elements to see the scroll bar work properly.

.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 元素将导致滚动条缩小 ，直到不再需要它为止.

Deleting some of those li elements will cause the scroll bar to shrink until it is not needed anymore.

这篇关于overflow-y:滚动不起作用，显示样式，但无法滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！