We all know that horizontal scrollbars are hideous. So, wouldn’t it be nice if we had a simple way to represent horizontal overflow? Well, thanks to a few javascript functions and some dinking around, I created a jQuery plug-in that will show a nice horizontal scrollbar to the user.

The jQuery horizontal scrollbar is very easy to implement. Feel free to check out the demo and download the source code. Additionally, checkout below on how to use the plug-in.

How To Use:

1. Add the necessary JS and CSS files

   <link rel="stylesheet" type="text/css" href="jquery.horizontal.scroll.css" />
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
   <script src="jquery.horizontal.scroll.js" type="text/javascript"></script>

2. In the jQuery loop call the horizontalScroll function from the outer div object

   <script type="text/javascript">
   	$(document).ready(function(){
   		$('#horiz_container_outer').horizontalScroll();
   	});
   </script>

3. Finally add the necessary HTML

   <ul id="horiz_container_outer">
   	<li id="horiz_container_inner">
   		<ul id="horiz_container">
   			<li>Image 1</li>
   			<li>Image 2</li>
   			<li>Image 3</li>
   			<li>Image 4</li>
   			<li>Image 5</li>
   		</ul>
   	</li>		
   </ul>			
    
    
   <div id="scrollbar">
   	<a id="left_scroll" class="mouseover_left" href="#"></a>
   	<div id="track">
   	     <div id="dragBar"></div>
   	</div>
   	<a id="right_scroll" class="mouseover_right" href="#"></a></div>
   </div>
   

Tips:

• Make sure that you give an ‘ID’ name for each of the three ‘container outer’, ‘container inner’, and the ‘container’.
• The outer container will be the viewing space, if you only want the user to view 800px then set this width to 800px. You will have to set the #scrollbar and #track to the same width. The container will have to be the full width of the long list you wish to scroll.