Question

I have come across an interesting code example that allows me to make DIV elements scrollable using jQuery (UI), which can be found here: http://www.simonbattersby.com/demos/vertical_scrollbar_demo.htm

I have subsequently turned it into a plugin to make it easier to use and more reusable. It’s working 99% but there is one small bug – for some reason when I CLICK the scrollbar it doesn’t scroll the DIV element.

If I use the mousewheel it works fine, but for some reason the click and drag doesn’t work.

The code I am working on is here: http://jsfiddle.net/mitchmalone/XRnxL/2/

Answer 1

Try this out.

slide: function (event, ui) {
    var topValue = -((100 - ui.value) * difference / 100);
    $(this).parents(".slider-wrap").prev(".scroll-pane").find('.scroll-content').css({
        top: topValue
    });
},
change: function (event, ui) {
    var topValue = -((100 - ui.value) * difference / 100);
    $(this).parents(".slider-wrap").prev(".scroll-pane").find('.scroll-content').css({
        top: topValue
    });
}

This issue was that $(this) is referencing div.slider-vertical calling find directly on the .scroll-content produced no results as .scroll-content is not a child of div.slider-vertical. To fix we need to traverse back up the dom and find the prev .scroll-pane and then find our .scroll-content and adjust the css value.

Updated fiddle.