This quick tutorial going to cover a weird issue where setting overflow-y:scroll on a list makes your bullet points disappear.

Recently I was working on a feature where I had to make a ul scrollable.

Okay, making an html element scrollable is simple enough.

So, I created a class like the following:

1
2
3
4
.my-class{
    max-height: 100px;
    overflow-y: scroll;
}

And just like that, I have a scrollable unordered list. There’s only one problem. My bullet points disappeared! Oh No!

Apparently when you set overflow-y to scroll,the bullet points, or whatever list style you are using, which are normally displayed outside of the element, get hidden.

Let’s see how we can fix this.

How To Have Bullet Points in A Scrollable List

Currently, our list style, which is positioned outside, is being hidden.
If we want to display bullet points or any other list style, we need to specify the list style position. To do this, we add the following:

1
list-style-position: inside;

Our class from before now looks like:

1
2
3
4
5
.my-class{
    max-height: 100px;
    overflow-y: scroll;
    list-style-position: inside;
}

And that’s it! We now have a scrollable list with the list styling intact.

If css content like this is interesting to you, you might enjoy this other article where I show How To Select The First Child in CSS.

Or if you want to read something, please check out the programming section for more awesome technical content.