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

Question

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

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

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

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

火狐： 然而，最大的问题是在 Firefox 中。在那里，垂直滚动条不会随着内容自动增长。我尝试使用 autoReinitialise，它适用于垂直滚动条随内容增长，但给我带来了另一个问题。当我使用 autoReinitialise 时，刚刚增长到 480px 的 div 又回到了 180px。所以 autoReinitialise 不能解决我的问题。

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

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

有关此内容的网站：http://nieuw.yworks.nl。部分是“项目” div。单击该 div 中的链接，您将看到问题。 （Safari 和部分 Firefox）。

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

提前致谢（希望我的英语没那么差:)）

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

---

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

$(".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) Animate 在 Firefox 上运行良好

2) 您永远不必直接更改 jspContainer 或 jspPane 的大小，这些大小由 jscrollpane 在初始化时设置，例如通过调用：

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

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

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) 如果你使用 $('.element').hide() 这会将元素设置为 display:none;并将其从页面中取出，这意味着如果您将 dic 的内容设置为显示 none 并尝试对其应用 jscrollpane，则会错误地计算大小。如果您对不透明度进行动画处理，它会起作用，但显然在不支持不透明度的浏览器中不起作用。

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

Answer 2

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