JScrollPane does not work properly with hidden content

Question

I installed jScrollPane on my website and cannot make it work.

My site works as follows: from the main page, pages are loaded dynamically using the jQuery load() method. On the download page, I have the following script to run jScrollPane:

 $(function(){ $('.scroll-pane').jScrollPane(); }); 

It seems to be called. There are no problems at the moment. The problem is that the page at the beginning is not long enough to need a scroll bar. I have hidden content that is displayed only on certain actions (for example, clicking a button shows the contents of a certain paragraph), and when I click to show the contents of a hidden div, the scroll bar does not appear.

I also tried calling $('.scroll-pane').jScrollPane(); , since I am showing new content (i.e. in the case where .show() triggers on a hidden div I also call $('.scroll-pane').jScrollPane(); ), but I also did not succeed.

Can anybody help me?

thanks

EDIT:

I forgot to mention the structure of the page: I have a div that has class="scroll-pane" and is loaded by loading the page, and contains small hidden divs that appear when you click on certain areas. I would like to add a scrollbar to the div with the class scrollbar so that the contents of the displayed div scrolls (right now the content remains in the size of the div, but it doesn't scroll as the jScrollPane scroll bar is not shown).

Update:

I tried putting $('.scroll-pane').jScrollPane(); in the callback of the .show() method of .show() and tried to put class="scroll-pane" in those divs that appear, but nothing is displayed again (the scroll bar does not display, and the div does not scroll).

Answer 1

Check out this demo provided by the plugin developer.

http://jscrollpane.kelvinluck.com/examples/invisibles.html

When the item is displayed for the first time, you just have to (re) initialize the scroll bar (or you can even use autoReinitialise if you want), and its width and height will be calculated correctly.

All you need is

 $(function(){ $('.scroll-pane').jScrollPane({autoReinitialise: true}); }); 

and maybe the latest version of the plugin

Answer 2

I suggest using the css visibility property instead of automatic reinitialization. Each time you call the show () method, jScrollPane reinitializes itself. It takes time and affects the animation.

If you use, say, slide .. () methods, the animation starts correctly, but the scrollable container (and its elements) appears a bit later, and it looks bad.

 var wrapper = jQuery('#gallery-album-preview-wrapper'); if (wrapper.css("visibility") == "hidden") { wrapper.css("visibility", "visible").css("display", "none"); } if (wrapper.is(":hidden")) { wrapper.slideDown(1000); } else { wrapper.slideUp(1000); }