Question

I have added jScrollPane to a div that already has a certain amount of jQuery attached to it.

jsFiddle example here.

The scrollbar styling appears, but the scrollbar doesn’t move, in-fact it’s not even ‘grabbable’ and my existing functionality fails. However, I don’t get any JS errors.

Comment out $('.block-product-gallery .block-content').jScrollPane(); in the html example above and my previous functionality returns (although in jsFiddle the click function doesn’t work – it does in my local browsers).

My first suspect is my hacky .scroll monitoring, but removing it doesn’t solve the problem and without any clear errors I’m increasingly stumped…

Answer 1

I’ve just had a play with your jsfiddle and got it a lot closer to working here:

http://jsfiddle.net/ZkAw8/1/

The main thing that was causing problems was the position: absolute on the rule for .block.block-product-gallery.non-static .block-inner .block-content .products. This meant that jScrollPane was having trouble calculating the width of it’s contents (since the contents were positioned absolutely they weren’t taking up any space inside the scrollpane and hence scrolling wasn’t necessary.

I also changed the overfow-x and overflow-y to just plain overflow – I haven’t done much testing with the direction specific overflows and they may not work correctly.

I’m not sure exactly what your productGallery plugin is meant to be doing but I think that it might not be working… Rather than listening for the scroll event you can try listening for the jsp-scroll-y event (see events in jScrollPane)