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 have put together a jQuery plug-in that will show a nice horizontal scrollbar to the user. Feel free to check out the Demo. Additionally, you can click the image below to be taken to the demo:

DEMO | DOWNLOAD

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
<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>
  1. In the jQuery loop call the horizontalScroll function from the outer div object
<script type="text/javascript">// <![CDATA[
	$(document).ready(function(){
		$('#horiz_container_outer').horizontalScroll();
	});
// ]]></script>
  1. 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>

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.

If you have any questions or any problems with this plug-in please feel free to share. Thanks ;)