JScrollPane 无法正确处理隐藏内容

Question

我在我的网站上安装了 jScrollPane 但无法使其工作。

我的网站的工作原理如下：从主页，使用 jQuery 的 load() 方法动态加载页面。在我加载的页面中，我有以下脚本来启动 jScrollPane：

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

这似乎被调用。我想到目前为止还没有问题。问题是页面一开始不够长，不需要滚动条。我隐藏了仅在特定操作上显示的内容（即单击按钮显示特定段落的内容），并且当我单击以显示隐藏 div 的内容时，滚动条不会出现。

我还尝试在显示新内容时调用 $('.scroll-pane').jScrollPane(); （即触发 .show() 的事件）在隐藏的 div 上，我还调用了 $('.scroll-pane').jScrollPane();) 但我也没有成功。

有人可以帮助我吗？

谢谢

编辑：

我忘了提及页面的结构：我有一个 div ，它有 class="scroll-pane" 并随页面加载一起加载，它包含单击特定区域时会显示小的隐藏 div。我想使用滚动窗格类向 div 添加一个滚动条，以便使显示的 div 的内容可滚动（现在内容保持在 div 的大小中，但它不可滚动，因为没有 jScrollPane 滚动条）所示）。

更新：

我尝试将 $('.scroll-pane').jScrollPane(); 放入 div 的 .show() 方法的回调中，并尝试将 class="scroll-pane" 放入出现的那些 div 中，但同样没有显示任何内容（滚动条不出现并且 div 不可滚动）。

Answer 1

查看插件开发人员提供的演示

http://jscrollpane.kelvinluck.com/examples/隐形.html

当元素首次显示时，您只需（重新）初始化
滚动窗格（或者如果您愿意，您甚至可以使用 autoReinitialise）和
它的宽度和高度将被正确计算。

您所需要的只是

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

并且可能是该插件的最新版本

Answer 2

我建议使用 css 可见性属性而不是自动重新初始化。每次调用 show() 方法时，jScrollPane 都会重新初始化自身。这需要时间并且会对动画产生影响。

如果您使用，比如说，slide..() 方法，那么动画会正常启动，但可滚动容器（及其元素）会稍后出现，这看起来很糟糕。

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);
}