Smooth jScrollPane scrollbar length adjustment with dynamic content

Question

Some of my webpages contain several text elements that expand and collapse with a jQuery "accordion" effect:

function show_panel(num) {
    jQuery('div.panel').hide();
    jQuery('#a' + num).slideToggle("slow");
}

function hide_panel(num) {
    jQuery('div.panel').show();
    jQuery('#a' + num).slideToggle("slow");
}

This causes the window size to change so jScrollPane has to be reinitialized, which will also change the length of the scrollbar. To achieve a smooth length adjustment of the scrollbar, I set the "autoReinitialise" option to "true" and the "autoReinitialiseDelay" to "40" ms:

$(document).ready(function () {
var win = $(window);
// Full body scroll
var isResizing = false;
win.bind(
    'resize',

function () {
    if (!isResizing) {
        isResizing = true;
        var container = $('#content');
        // Temporarily make the container tiny so it doesn't influence the
        // calculation of the size of the document
        container.css({
            'width': 1,
                'height': 1
        });
        // Now make it the size of the window...
        container.css({
            'width': win.width(),
                'height': win.height()
        });
        isResizing = false;
        container.jScrollPane({
            showArrows: false,
            autoReinitialise: true,
            autoReinitialiseDelay: 40
        });
    }
}).trigger('resize');

// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');

// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if ($('#content').width() != win.width()) {
    win.trigger('resize');
}

});

The effect is ok, but on the cost of a very high CPU usage which makes my fan go wild.

This is a jsfiddle which shows the settings and the effect: http://jsfiddle.net/VVxVz/

Here's an example page (in fact it's an iframe within the webpage shown): http://www.sicily-cottage.net/zagaraenausfluege.htm

Is there a possibility to achieve the same "smooth" transition of the scrollbar length without using the "autoReinitialise" option, maybe with an additional script, some modification of the jscrollpane.js, or simply a css animation of the scrollbar and then calling the reinitialise manually?

I'm absolutely useless at javascript so any help would be greatly appreciated.

Answer 1

There is no need to initialise jScrollPane on your content everytime window is resized. You should do it only once - on $(document).ready(). Also, there is no need in using autoReinitialize if your content is staic. You should reinitialise jScrollPane to update scrollbar size only when you slideUp/slideDown one of your container or on window.resize. So, code become less and more beautiful :)

function togglePanel(num) {
    var jsp = $('#content').data('jsp');
    jQuery('#a' + num).slideToggle({
        "duration": "slow",
        "step": function(){
            jsp.reinitialise();
        }
    });
    return false;
}

$(document).ready(function () {

    var container = $('#content').jScrollPane({
        showArrows: false,
        autoReinitialise: false
    });
    var jsp = container.data('jsp');

    $(window).on('resize', function(){
        jsp.reinitialise();
    });

    // Workaround for known Opera issue which breaks demo (see
    // http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
    $('body').css('overflow', 'hidden');

    // IE calculates the width incorrectly first time round (it
    // doesn't count the space used by the native scrollbar) so
    // we re-trigger if necessary.
    if (container.width() != $(window).width()) {
        jsp.reinitialise();
    }

});