Il est normal que ce soit uniquement l’onglet visible qui soit en mesure d’afficher une scroll-bar.
C’est parce que les autres onglet sont invisibles (masqués par « display: none; ») et que le plug-in jScrollPane ne peut par conséquent pas calculer la hauteur de leurs contenus respectifs. Le résultat retourne zéro, donc le script décide de ne pas afficher de scRoll-bar.
Utiliser jScrollPane avec le système d’onglets (tabs) de Twitter Bootstrap
Source : Twitter Bootstrap 3 | Tabs
Correction du bug : http://stackoverflow.com/questions/10548617/twitter-bootstrap-tabs-href-anchor-tag-jumping.
<script type="text/javascript">
jQuery(function(){
// http://stackoverflow.com/questions/10548617/twitter-bootstrap-tabs-href-anchor-tag-jumping
jQuery('.nav-tabs li a').click(function (e) {
e.preventDefault();
jQuery(this).tab('show');
jQuery('.tab-content > .tab-pane.active .scroll-pane').jScrollPane({
// http://jscrollpane.kelvinluck.com/arrows.html
showArrows: true,
// http://jscrollpane.kelvinluck.com/drag_size.html
verticalDragMinHeight: 17,
verticalDragMaxHeight: 17
});
});
});
</script>
<ul id="productTab" class="nav nav-tabs tab-list">
<li class="active"><a href="#avis" data-toggle="tab">${trans:m.catalog.frontoffice.tab-avis,ucf}</a></li>
<li><a href="#donnezavis" data-toggle="tab">${trans:m.catalog.frontoffice.tab-donnezavis,ucf}</a></li>
<li><a href="#plusinfos" data-toggle="tab">${trans:m.catalog.frontoffice.tab-plusinfos,ucf}</a></li>
<li><a href="#demos" data-toggle="tab">${trans:m.catalog.frontoffice.tab-demos,ucf}</a></li>
</ul>
<!-- Tab panes -->
<div id="productTabContent" class="tab-content">
<!-- Début : Avis -->
<div class="tab-pane active" id="avis">
<div class="scroll-pane">
</div>
</div>
<!-- Fin : Avis -->
<!-- Début : Donnez votre avis -->
<div class="tab-pane" id="donnezavis">
<div class="scroll-pane">
<h2>Donnez votre avis</h2>
</div>
</div>
<!-- Fin : Donnez votre avis -->
<!-- Début : Plus d'infos -->
<div class="tab-pane" id="plusinfos">
<div class="scroll-pane">
<h2>Plus d'infos</h2>
</div>
</div>
<!-- Fin : Plus d'infos -->
<!-- Début : Demos -->
<div class="tab-pane" id="demos">
<div class="scroll-pane">
<h2>Demos</h2>
</div>
</div>
<!-- Fin : Demos -->
</div>
.tab-content .scroll-pane{
width: 100%;
height: 420px;
overflow: auto;
}
.tab-content .horizontal-only{
height: auto;
max-height: 420px;
}