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

Question

我在我的投资组合网站中使用滚动条的jScrollPane（很棒的东西！），但我遇到了一个我似乎无法解决的问题。

问题突出显示，当我更改div的宽度和长度与jQuery。

我有一个宽度为180px的列（div＃projects）。在div里面有一个链接列表。当用户点击链接时，div需要“增长”到480px宽度。 div的内容也改变了。链接列表消失，并显示项目列表。那件作品。但jScrollPane不会随着内容的增长而增长，因为我希望这样做。我有两个不同的问题。

Safari： 在Safari中，垂直滚动条会随内容自动增长。所以这很好。但是当div的宽度增长到400px时，突然出现一个宽度为180px的水平滚动条（div的上一个宽度）。 。

Firefox： 但是，最大的问题在于Firefox。在那里，垂直滚动条不会随着内容自动增长。我尝试过使用autoReinitialise，对于垂直滚动条与内容一起增长而言工作良好，但是却给我带来了另一个问题。当我使用autoReinitialise时，刚刚长到480px的div会再次回到180px。所以autoReinitialise不能解决我的问题。

在Firefox中，您还可以看到一个div看起来不应该如此（如果您点击了链接并查看项目）。这是以前的内容（链接列表）的高度。

这是我最大的问题。但我还有一个小问题：是否可以始终显示滚动条或为每个div.scroll-pane提供独特的类？ 原因当我调整div＃项目的宽度为480px，我也必须更改滚动窗格容器的宽度。现在，我使用jQuery给每个div一个独特的类。如果滚动条并不总是可见的，则并不总是有相同数量的div。所以现在我总是通过在内容下放置另一个div来显示滚动条。但是，如果我可以给每个滚动窗格div一个独特的类（手动），我不需要始终显示滚动条。

这是关于的网站：http://nieuw.yworks.nl。部分是“项目”分区。点击该div中的链接，你会看到问题。 （Safari和Firefox）。

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

在此先感谢（希望我的英文并不坏:)）

编辑：我使用Safari 5.4.1和Firefox 9.0.1。没有在Internet Explorer中测试它，这也会导致更多的问题，我猜。

---

我想我发现了这个问题。这些div（图片：http://nieuw.yworks.nl/extern/divs.png）仍然是180px而不是480px。唯一的是，我现在不是为什么。这是代码：

$（“。item-30”）。css（“width”，“480px”）; $（“。item-31”）。css（“width”，“420px”）;

   $("#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'); 

而在Firefox中，我不使用动画原因，似乎没有工作，我只是使用$（“＃projects”）。css（“width”，“480px”）;

这和我在第二部分提到的问题一样。 .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）动画作品在Firefox精绝

2）你不应该直接更改jspContainer或jspPane的尺寸大小这些由jscrollpane在初始化时设置，例如通过调用：

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

3）如果你只改变了滚动窗格的内容，您只需要重新初始化，以便它可以做这样的事情重新计算的滚动条和contentPane的：

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

4）如果你实际上改变了div的大小，你正在使用jscrollpane，你必须销毁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）如果你使用$（“元素。”）隐藏（）这将设置元素显示：无;并将其从页面中取出，这意味着如果您将dic的内容设置为不显示任何内容，并尝试对其应用jscrollpane，则大小将被错误计算。它可以起作用，如果你改变不透明的动画效果，但显然不支持不支持不透明的浏览器。 8）最后，在例6中有两个动画分支，它们将同时运行。

Answer 2

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