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。