jQuery Horizontal Scrollbars

Created June 24, 2011

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:


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 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
  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>


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

If you are looking for an alternate solution, you may want to checkout the alternatives below:

Easy Scroll

jQuery Horizontal Image Scroller w/ Lightbox