Jscrollpane horizontal wheel

Question

I was unable to get the mouse wheel to scroll the horizontal jscrollpane panel. Someone has experience with this and may offer some pointers.

In the comments of the js file, I see the next update just a couple of months ago // 2.0.0beta3 - (2010-08-27) Horizontal mouse wheel, mwheelIntent, keyboard support, bug fixes

I looked at the github problems page and frequently asked questions about Kelvin, as well as the famous problem pages, as well as the google group, and nothing makes me think that this should not be possible.

Any help is appreciated.

Answer 1

You need to make sure that you are using the version of the mousewheel plugin that was released after 2010-08-27 - changes were made to the mousewheel plugin, as well as to jScrollPane, to make it work. In my demo pages I use 3.0.4:

http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js

If this does not help, you can confirm whether horizontal scrolling works on your demo pages. This happens in all browsers I tried that have a mouse capable of moving horizontal wheels (or the macbook touchpad).

Answer 2

You can use something like this:

$('.scroller').each(function(){ var scrollPane = $(this).jScrollPane(); var api = scrollPane.data('jsp'); scrollPane.bind( 'mousewheel', function (event, delta, deltaX, deltaY) { api.scrollByX(delta*-50); return false; } ); }); 

Change -50 to another value to change the speed and direction of scrolling.

Answer 3

I used the Mousewheel detection plugin from Brandon Aaron:
http://brandonaaron.net/code/mousewheel/demos

It works well in FF, Opera, Safari, Chrome, IE8 +.

Answer 4

I used the link 1.5 yeears below and it worked for sure, please let me know if you have any doubts.

 http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html 

Answer 5

This works great on my site.

Try it.

 jQuery(function($) { $('div.scroll-pane') .bind('mousewheel', function(event) { var scrollPane = $(this).jScrollPane(); var api = scrollPane.data('jsp'); scrollPane.bind( 'mousewheel',function (event, delta, deltaX, deltaY) { api.scrollByX(delta*-50); return false; } ); }); });