WordPress and jScrollPane

Some notes for getting WordPress and jScrollPane working.

I wasn’t interested in the plugin because it is out of date and seems to carry a log of baggage.

These links were helpful:




My code in an add_action function to wp_head:

add_action( 'wp_enqueue_script', 'load_jquery' );
function load_jquery() {
    wp_enqueue_script( 'jquery' );

<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="wp-content/themes/some path.../jquery.mousewheel.js"></script>

<!-- the jScrollPane script -->
<script type="text/javascript" src="wp-content/themes/some path.../jquery.jscrollpane.min.js"></script>

<script type="text/javascript" src="wp-content/themes/some path.../resize.js"></script>

<script type="text/javascript" id="sourcecode">
    jQuery(document).ready(function($) {
        // Code here will be executed on document ready. Use $ as normal.
        $('.scroll-pane').jScrollPane({mouseWheelSpeed: 30});

I had to set the mouse wheel speed; it was way too slow, default is 3.

resize.js didn’t work without modification.

(function($) {
// added outer stuff to get resize working with js wordpress way 2013-05-13
                    showArrows: $(this).is('.arrow')
            var api = $(this).data('jsp');
            var throttleTimeout;
                'resize load', //added load 2013-04-30 so the images would fit on android
                    if ($.browser.msie) {
                        // IE fires multiple resize events while you are dragging the browser window which
                        // causes it to crash if you try to update the scrollpane on every one. So we need
                        // to throttle it to fire a maximum of once every 50 milliseconds...
                        if (!throttleTimeout) {
                            throttleTimeout = setTimeout(
                                    throttleTimeout = null;
                    } else {


The containing anonymous function was needed to get this working with WordPress. I added load because this prevents panes with photos loaded from a third party site from being incorrectly rendered. Without it the space they take up is not accounted for.

Leave a Reply

Your email address will not be published. Required fields are marked *