jscrollpane horizontal mousewheel

Question

I have been unsuccessful getting the mouse wheel to scroll a horizontal jscrollpane. Does anyone have experience with this and can offer some pointers.

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

I've looked on the github issues page and Kelvin's FAQ and known issues pages as well as the google group and nothing makes me think this shouldn't be possible.

Any assistance is appreciated.

Answer 1

You need to make sure that you are using a version of the mousewheel plugin which came out after 2010-08-27 - changes were made to the mousewheel plugin as well as to jScrollPane to make it work. On my demo pages I am using 3.0.4:

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

If that doesn't help then can you confirm whether horizontal scrolling works for you on my demo pages. It does in all browsers I have tried which have a mouse capable of horizontal wheel motions (or on a macbook trackpad).

Answer 2

You could 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 the scrolling.

Answer 3

I've used a mousewheel detection plugin by Brandon Aaron:
http://brandonaaron.net/code/mousewheel/demos

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

Answer 4

i have used the below link 1.5 yeears back 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 on my site perfectly.

Try.

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;
        } 
         ); 
        });
});