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 : jScrollPane.

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;
}