Overflow-y: Scroll Not Working, Showing Style But Cannot Be Scrolled?

my code is simple like this: it shows style of a scroll on the side but lacking that scroll you use to move up and down?

Solution 1:

There is no need to scroll.

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.

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>

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

Solution 2:

You can get it by reducing height like following

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

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

Solution 3:

you set a height of 285 pixels, which is more than enough for three list elements.

if you reduce the height to, say, 50 px or simply add more content inside the div, the scrollbar becomes active.

see https://jsfiddle.net/ppk10zf9/

<divclass="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>

and

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