jScrollPane -垂直滚动条不随内容“增长”

Question

我正在使用jScrollPane (很棒的东西！)在我的投资组合网站上滚动条，但我遇到了一个问题，我似乎解决不了自己。

当我用jQuery更改div的宽度和长度时，会突出显示这个问题。

我有一个宽度为180 of的列(div#projects)。在这个div里面有一个链接列表。当用户单击链接时，div需要“增长”到480 to宽度。同时，div的内容也发生了变化。链接列表消失，并显示项目列表。那件作品很管用。但是jScrollPane不会像我希望的那样随着内容的增长而增长。我有两个不同的问题。

Safari:在Safari中，垂直滚动条随着内容自动增长。所以效果很好。但是当div的宽度增长到400 of时，突然出现一个180 of宽度的水平滚动条(div的前一个宽度)。。

火狐:最大的问题是在火狐。在那里，垂直滚动条不会随着内容自动增长。我试着使用autoReinitialise，这对垂直滚动条的内容增长很好，但是给我带来了另一个问题。当我使用autoReinitialise时，刚刚增长到480 to的div又回到了180 to。所以autoReinitialise不能解决我的问题。

在Firefox中，您还可以看到一个div看起来不像它应该的样子(如果您单击了一个链接并查看了项目)。这大约是之前内容的高度(有链接的列表)。

这是我最大的问题。但我还有另外一个小问题:是否可以始终显示滚动条，或者为每个div.滚动窗格提供唯一的类？因为当我将div#projects的宽度调整为480 of时，我还必须更改滚动窗格容器的宽度。现在，我使用jQuery为每个div提供一个惟一的类。如果滚动条并非总是可见的，则不一定有相同数量的div。因此，现在我总是通过在内容下面放置另一个div来显示滚动条。但是，如果我可以给每个滚动窗格div一个唯一的类(手动)，我不需要总是显示滚动条。

这个网站的内容是：http://nieuw.yworks.nl。特别是“项目”司。单击div中的一个链接，您将看到问题所在。(Safari，特别是Firefox)。

我希望有人能帮我解决这个问题。我已经挣扎了两天了。

提前谢谢(希望我的英语没那么差：)

编辑:我使用Safari 5.4.1和Firefox 9.0.1。没有在中进行测试，这也会导致更多的问题。

我想我找到问题了。这些div (pic：http://nieuw.yworks.nl/extern/divs.png)仍然是180 of，而不是480 of。唯一的问题是，我现在不知道为什么。这是代码：

$(“..item 30”).css(“宽度”，“480 30”)；$(“..item 31”).css(“宽度”，“420 30”)；

                $("#projects").stop().animate({width:'480px'},{queue:false, duration:300});

                $("#projects").css("background","#fff");

                $('#projectsList').hide();
                $('#projectsContent').show();
                $("#contact").stop().animate({left:'1524px'},{queue:false, duration:300});
                $("#footer").stop().animate({left:'1745px'},{queue:false, duration:300});

                var api = $('#projects').jScrollPane().data('jsp');
                api.destroy();
                $('#projects').jScrollPane({contentWidth:480}).data('jsp');

在火狐中，我不使用看起来不起作用的动画，我只使用$(“#projects”).css(“宽度”，“480 to”)；

这是我在问题第二部分提到的问题。.jspContainer和.jspPane div没有唯一的id，我不能给它们，因为jScrollPane生成它们。如果我调整.jspContainer和.jspPane，而不是所有这些div。如果我通过jQuery调整它们的宽度，它将被覆盖。

Answer 1

试试这个：

var api = $('#projects').jScrollPane().data('jsp');
 api.destroy();  
 $("#projects").stop().animate({width:'480px'},300, function(){
                         $('#projects').jScrollPane({contentWidth:480}).data('jsp');
                    });

澄清：

1)动画在火狐上非常好

2)您不应该直接更改jspContainer或jspPane的大小，它们的大小在初始化时由jscrollpane设置，例如通过调用：

$('#projects').jScrollPane().data('jsp');

3)如果只更改滚动窗格的内容，只需重新初始化滚动窗格，就可以通过以下操作重新计算滚动条和内容窗格：

var api = $('#projects').jScrollPane().data('jsp');
api.reinitialise();

4)如果实际上正在更改div的大小，则必须销毁jscrollpane的实例并重新创建它。我发现，如果更改宽度，在这样做时显式指定宽度是最安全的，如下所示：

var api = $('#projects').jScrollPane().data('jsp');
api.destroy();
$('#projects').width(480); 
$('#projects').jScrollPane({contentWidth:480}).data('jsp');

5)如果正在动画宽度，则需要等到动画完成后才能重新初始化滚动窗格，以便在动画的回调函数中初始化滚动窗格，如下所示：

     var api = $('#projects').jScrollPane().data('jsp');
     api.destroy();
     $("#projects").animate({width:'480px'},300, function(){
                         $('#projects').jScrollPane({contentWidth:480}).data('jsp');
                    });

6)当我试图做类似的效果时。我想启动一系列的动画后的第一次。您可以通过嵌套最后一个回调中的每个动画来做到这一点，例如：

$("#projects .content").animate({opacity:0},300, function(){ //anim branch 1
           //content fade animation finished now do this:
           var api = $('#projects').jScrollPane().data('jsp');
           api.destroy();
           $("#projects").animate({width:'480px'},300, function(){
                          // width change animation finished now do this:
                          $('#projects').jScrollPane({contentWidth:480}).data('jsp');
                          //fade content back in
                          $("#projects .content").animate({opacity:1},300);
           });
});
$("#contacts").animate({left:1000},300); //anim branch 2

7)如果使用$('.element').hide()，这将将元素设置为显示: none；并将其从页面中删除，这意味着如果您将dic的内容设置为显示none并尝试对其应用jscrollpane窗格，则大小将被错误计算。它的工作，如果你动画的不透明度，但显然不会工作在浏览器，不支持不透明度。

8)最后，在示例6中有两个动画分支，它们将同时运行。

Answer 2

我建议您在加载窗口后应用jscrollpane()。也就是说，使用windows.load，而不是使用document.ready。