Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • custom scrollbar using jQuery UI

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 246
    Comment on it

    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>

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: