Horizontal  Javascript SrollPane

Horizontal Javascript SrollPane

Released 7 years ago , Last update 7 years ago

A horizontal JQuery ScrollPane with dragging and optional mouse-wheel support.

Add horizontal scrollpane to your web pages contents.

  • 5 1
  • 4 0
  • 3 0
  • 2 0
  • 1 0
1 Reviews Read Reviews


14 day 14-day money-back guarantee


Personal License

  • Perpetual license

  • 1 site, unlimited servers

  • No distribution (hosted use only)

  • Commercial use


  1. Unzip horizontal--javascript-srollpane.3.0.zip

  2. Open scrollpaneh.html and see example.

  3. Usage:

Include the following files in the head of your page:

  • jQuery (I'm using 1.5.2 here)
  • the mouse wheel plugin (if you want mouse wheel support)
  • the jQEm plugin (if you want your scroll panes to automagically resize when the user changes text size)
  • jScrollPaneH.js
  • jScrollPaneH.css

For example:

<script type="text/javascript" src="scripts/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="scripts/jquery.em.js"></script>
<script type="text/javascript" src="scripts/jScrollPaneH.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="styles/jScrollPaneH.css" />

Then you can use any query selector to select the elements you would like to apply jScrollPane and then initialize it. The following code runs when the document is ready and finds any element with a class of "scroll-pane" and then calls jScrollPane on them.


You can pass some optional parameters to the jScrollPane function. These take the form of an object with the following attributes:

// Height of the created scrollbar in pixels (defaults to 10)
scrollbarHeight [int]

// Margin to leave to the left of the scrollbar in pixels (defaults to 5)
scrollbarMargin [int]

// Scroll speed in pixels per wheel step (defaults to 18)
wheelSpeed [int]

// Show arrow navigation (defaults to false)
showArrows [boolean] 

// Height of the arrow navigation if showArrows=true (calculated from CSS if not provided)
arrowSize [int]

// Animate when calling scrollTo and scrollBy (defaults to false)
animateTo [boolean] 

// Drag bar minimum height (defaults to 0)
dragMinHeight [int] 

// Drag bar maximum height (defaults to 99999!)
dragMaxHeight [int] 

// Animation update interval in milliseconds (default 100)
animateInterval [int] 

// Number of steps to run animation through (default 3)
animateStep [int]

// Maintain position when content is changed (default true)
maintainPosition [boolean] 

// Scrollbar appears on top of the content (CSS should also reflects this)
scrollbarOnTop [boolean] 

// Automatically re-initialise  when any contained images are loaded (defaults to false)
reinitialiseOnImageLoad [boolean] 
License » Personal License Download

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.

Or enter your name and Email
No comments have been posted yet.