Question

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

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

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

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

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

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

这是我最大的问题。但我还有另一个小问题：是否可以始终显示滚动条或为每个div.scroll-pane提供唯一的类？因为当我将div #project的宽度调整为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）仍然是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）Animate在Firefox上运行得非常好

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）如果你使用$（＆＃39; .element＆＃39;）。hide（）这会将元素设置为display：none;并将其从页面中取出，这意味着如果您将dic的内容设置为none并尝试对其应用jscrollpane，则将错误地计算大小。如果您为不透明度设置动画，但它显然不适用于不支持不透明度的浏览器。

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

Answer 2

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

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

2 个答案: