A scrollbar is a communication method or gadget in which nonstop content, pictures, or some other substance can be looked in a foreordained heading (up, down, left, or right) on a PC showcase, window, or viewport so that the majority of the substance can be seen, regardless of the possibility that exclusive a small amount of the substance can be seen on a gadget's screen at one time

Here is an example to create custom scrollbar in html using jquery ui

HTML :

<div class="artist-list scroll">
			<ul class="clearfix">
				<li class="clearfix" style="position: relative;">
					<figure>
						<img src="img/artist.png">
						<figcaption><h1>Avenged Sevenfold</h1>
                     </figcaption>
					</figure>
				</li>
				<li class="clearfix" style="position: relative;">
					<figure>
						<img src="img/artist.png">
						<figcaption><h1>Avenged Sevenfold</h1>
                    </figcaption>
					</figure>
				</li>
				<li class="clearfix" style="position: relative;">
					<figure>
						<img src="img/artist.png">
						<figcaption><h1>Avenged Sevenfold</h1>
                    </figcaption>
                   </figure>
					

				</li>
				<li class="clearfix" style="position: relative;">
					<figure>
						<img src="img/artist.png">
						<figcaption><h1>Avenged Sevenfold</h1>
                    </figcaption>
                   </figure>
					
                </li>
				<li class="clearfix" style="position: relative;">
                   <figure>
						<img src="img/artist.png">
						<figcaption><h1>Avenged Sevenfold</h1>
                    </figcaption>
                    </figure>
					

				</li>
				<li class="clearfix" style="position: relative;">

					<figure>
						<img src="img/artist.png">
						<figcaption><h1>Avenged Sevenfold</h1>
                    </figcaption>

					</figure>
					

				</li>
				<li class="clearfix" style="position: relative;">

					<figure>
						<img src="img/artist.png">
						<figcaption><h1>Avenged Sevenfold</h1>
                    </figcaption>

					</figure>
					

				</li>
				<li class="clearfix" style="position: relative;">

					<figure>
						<img src="img/artist.png">
						<figcaption><h1>Avenged Sevenfold</h1>
                    </figcaption>

					</figure>
					

				</li>
				<li class="clearfix" style="position: relative;">

					<figure>
						<img src="img/artist.png">
						<figcaption><h1>Avenged Sevenfold</h1>
                     </figcaption>

					</figure>
					

				</li>
				<li class="clearfix" style="position: relative;">

					<figure>
						<img src="img/artist.png">
						<figcaption><h1>Avenged Sevenfold</h1>
                   </figcaption>

					</figure>
					

				</li>
				<li class="clearfix" style="position: relative;">

					<figure>
						<img src="img/artist.png">
						<figcaption><h1>Avenged Sevenfold</h1>
                       </figcaption>

                      </figure>
					

				</li>
                 </ul>
		     </div>

CSS :

*{margin:0px;padding:0px;list-style: none;font-family: 'Open Sans', sans-serif;}
.clearfix {clear: both;}
body{background-image: url(../img/lee.jpeg); background-size: cover; background-repeat: no-repeat; background-color: #313342; width: 100%; 
    height: 100%;  z-index:1;}

.mainContainer{position: relative;}

.artist-list, .album-list,.songs-list  {
    width: 65%;
     border: 1px solid #000; overflow:hidden;
     height:468px;
     position: relative;
}
.artist-list li{

    width: 100%;text-align: center; padding-top: 20px;
   }
 .artist-list li figure {
    display: inline-block;
    float: left;
    width: 51%;
}

.artist-list li {border: 1px solid #000; padding: 20px;}
   .artist-list li figure figcaption{display: inline-block;}
    .artist-list li figure figcaption >h1{font-size: 18px; color: #fff; margin-left:20px;}
    .artist-list li  .glyphicon-btn{float: right;}

    .artist-list li  .glyphicon-btn .glyphicon.glyphicon-option-vertical {
    font-size: 30px;
    padding-right: 45px;
    padding-top: 20px;
    color:#FF534F;
}


.jspVerticalBar, .jspTrack{background: none;}
.jspDrag{background:#FF4F4B;border-radius: 15px; }
.jspVerticalBar{width: 6px; 

jquery :

<script type="text/javascript">
	

	$(function() {
		$(".scroll").jScrollPane();
		$("#content").css("display", "none");
		$("#content").fadeIn(500);
	});

</script>

Add the following script :

href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>