Question

I am using JScrollPane to style my scrollbars. However, I need to load the content via ajax.

What I found it JSrollpane does not automatically add the scrollbar when the content exceeds the hight.

Can anyone suggest a work-around to this problem?

There are 2 examples. Test Block #1 uses JScrollPane and Test Block #2 uses the default scrollbar.

If you click in the red box in either test case, sample content is added in response. You’ll notice the default scrollbar adjusts automatically but jscrollpane does not adjust even though the content is added.

Answer 1

To anyone who is interested …

The solution is actually annoyingly simple – you recall the jscrollPane() function on the desired element each time content is loaded into the element.

i.e:

$('div#block-block-1 div.content').jScrollPane();

    $('div#block-block-1 div.content').click(
        function(){
            $(this).text( $(this).text() + "Pellentesque eget diam enim; et mattis nullaPellentesque eget diam enim; et mattis nulla." );
            $(this).css('text-indent', '0');
            $('div#block-block-1 div.content').jScrollPane();
        }
    );

JScrollPane is applied to the div.content initially and then also each time more content is loaded in when responding to a click event. This way the custom scrollbar automatically adjusts.

I hope that helps someone.