Exemple de jScrollPane et d'onglets, presque fonctionnels

Question

Je voudrais que la barre de défilement (de jScrollPane) apparaisse avec chaque onglet (de Soh Tanaka). À l'heure actuelle, il apparaît pour le premier onglet, mais il revient à la valeur par défaut du navigateur pour les deuxième, troisième, quatrième onglets ...

Voir mon exemple en direct ici: jScrollPane and Tabs, almost working together

Comment puis-je obtenir le défilement barre à afficher sur chaque onglet? Merci!

<script type="text/javascript"> 
    jQuery.noConflict(); 
    jQuery(document).ready(function($) { 
    jQuery('.scroll-pane').jScrollPane({ 
       verticalDragMinHeight: 20, 
       verticalDragMaxHeight: 20, 
       horizontalDragMinWidth: 20, 
       horizontalDragMaxWidth: 20 
    }); 

});

<script type="text/javascript"> 
$(document).ready(function() { 

//When page loads... 
$(".tab_content").hide(); //Hide all content 
$("ul.tabs li:first").addClass("active").show(); //Activate first tab 
$(".tab_content:first").show(); //Show first tab content 

//On Click Event 
$("ul.tabs li").click(function() { 

    $("ul.tabs li").removeClass("active"); //Remove any "active" class 
    $(this).addClass("active"); //Add "active" class to selected tab 
    $(".tab_content").hide(); //Hide all tab content 

    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
    $(activeTab).fadeIn(); //Fade in the active ID content 
    return false; 
}); 

});

Answer 1

Vous devez réinitialiser jScrollPane après avoir affiché chaque onglet. Un exemple simple ici:

http://jscrollpane.kelvinluck.com/invisibles.html

Dans votre cas, vous pouvez essayer:

$("ul.tabs li").click(function() { 

    $("ul.tabs li").removeClass("active"); //Remove any "active" class 
    $(this).addClass("active"); //Add "active" class to selected tab 
    $(".tab_content").hide(); //Hide all tab content 

    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
    $(activeTab).fadeIn().jScrollPane(); //Fade in the active ID content and apply jScrollPane 
    return false; 
}); 

(j'ai posté en quelque sorte cette réponse à the wrong question hier - désolé pour le retard à répondre!)