Add a Scrollbar in CSS

[puddlejumper26]

Today I need to add a scrollbar into the project, however, it is more difficult than I thought.

We all know the common way to add a scrollbar with CSS into the HTML template.Therefore first let's take a look how many ways are there to do this.

overflow: scroll

Display both scrollbar in x-axis and y axis. here the height is a must. Therefore when the content has larger displayed value, the scrollbar is meaningful.

.className{
   overflow: scroll;   
   height: 100px;
}

overflow: auto

Display both scrollbar in x-axis and y axis only when it needs.

.className{
   overflow: auto;   
   height: 100px;
}

overflow -y : scroll

Display both scrollbar only in y axis

.className{
   overflow-y: scroll;   
   height: 100px;
}

overflow -y : auto

Display both scrollbar only in y axis when it needs.

.className{
   overflow-y: auto;   
   height: 100px;
}

Custom Scrollbar Stylling

Here is the link from CodePen