How to Implement Sticky Scroll bar using CSS - MaXEster Technologies

The scroll bar is part of the webpack engine and differs from browser to browser. To Give your site a uniform field on all the client ends CSS can be used.

Below there are three types of scrollbar which made by CSS. You can easily use them. First one with thin scrollbar and the Second one is thick scrollbar. And the last third one is different from both of first.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.

As opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.

As opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.

As opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.

STYLE


.scrollbar {
    margin-left: 30px;
    float: left;
    height: 300px;
    width: 65px;
    background: #F5F5F5;
    overflow-y: scroll;
    margin-bottom: 25px;
}

/*
 *  STYLE 1
 */
#style-1::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
	background-color: #000000;
}
/*
 *  STYLE 2
 */
#style-2::-webkit-scrollbar-track
{
	border: 1px solid black;
	background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb
{
	background-color: #000000;	
}

/*
 *  STYLE 3
 */
#style-3::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#style-3::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-image: -webkit-gradient(linear,
									   left bottom,
									   left top,
									   color-stop(0.44, rgb(122,153,217)),
									   color-stop(0.72, rgb(73,125,189)),
									   color-stop(0.86, rgb(28,58,148)));
}

HTML

<div class="scrollbar" id="style-1">
Your Content...

</div>

<div class="scrollbar" id="style-2">
Your Content...

</div>

<div class="scrollbar" id="style-3">
Your Content...

</div>

Leave a Reply Cancel reply