Search code examples
jqueryjscrollpanehorizontal-scrollingjquery-jscrollpane

jscrollpane adding horizontal mouse wheel


made this horizontal jscrollpane with images. selector: .scroll-pane multiple scrolls on the same page.

this is how I call it: $('.scroll-pane').jScrollPane();

Now I want to add a horizontal mouse wheel to it (so, to scroll horizontally, by using horizontal scroll - mac pad, or a mouse with horizontal scroll), so I made this:

var api = element.data('jsp');
element.bind(
  'mousewheel',
  function (event, delta, deltaX, deltaY)
  {
   api.scrollByX(delta);
     return false;
 }
);

and it works good, but just for the first selector + all the rest divs do not have a scrollbar anymore.

Could I add something like a each to it?

Any ideas?

Thanks!


Solution

  • Found the working solution and tested in moz & chrome

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