Barre de défilement personnalisée pour conteneur avec largeur changeante

Question

J'ai un div avec changement de largeur car à l'intérieur j'ai accordéon horizontal. J'ai besoin de faire une barre de défilement personnalisée pour cela. J'ai essayé 2 plugins: this et this, aucun de ceux travaillés. Peut-être que certains d'entre vous ont eu un problème similaire? Merci d'avance!

Fiddle

<div class="scroll-pane"> 
    <div class="product"> 
     <div class="product-title"> 
      <img src="http://goo.gl/PUr1TP" /> 
      <div class="desc">This is a description This is a description This is a description This is a description This is a description This is a description This is a description</div> 
     </div> 
     <div class="product-all"> 
      <div style="width: 200px; background: red;">1</div> 
      <div style="width: 100px; background: yellow;">2</div> 
      <div style="width: 400px; background: pink;">3</div> 
      <div style="width: 270px; background: blue;">4</div> 
      <div style="width: 500px; background: aqua;">5</div> 
     </div> 
    </div> 
    <div class="product"> 
     <div class="product-title"> 
      <img src="https://goo.gl/hRJ3Dz" /> 
      <div class="desc">This is a description</div> 
     </div> 
     <div class="product-all"> 
      <div style="width: 200px; background: red;">1</div> 
      <div style="width: 100px; background: yellow;">2</div> 
     </div> 
    </div> 
    <div class="product"> 
     <div class="product-title"> 
      <img src="https://goo.gl/hRJ3Dz" /> 
      <div class="desc">This is a description</div> 
     </div> 
     <div class="product-all"> 
      <div style="width: 200px; background: red;">1</div> 
      <div style="width: 400px; background: pink;">3</div> 
      <div style="width: 270px; background: blue;">4</div> 
     </div> 
    </div> 
    <div class="product"> 
     <div class="product-title"> 
      <img src="https://goo.gl/vX3Aih" /> 
      <div class="desc">This is a description</div> 
     </div> 
     <div class="product-all"> 
      <div style="width: 200px; background: red;">1</div> 
     </div> 
    </div> 
    <div class="product"> 
     <div class="product-title"> 
      <img src="http://goo.gl/rXt3kE" /> 
      <div class="desc">This is a description</div> 
     </div> 
     <div class="product-all"> 
      <div style="width: 270px; background: blue;">4</div> 
      <div style="width: 500px; background: aqua;">5</div> 
      <div style="width: 100px; background: green;">6</div> 
     </div> 
    </div> 
</div> 

.scroll-pane { 
    height: 200px; 
    overflow: auto; 
    margin: 10px 0; 
    background: #fff; 
    height: 200px; 
    width: 100%; 
    /*overflow-x: scroll;*/ 
    overflow-y: hidden; 
    white-space: nowrap; 
    margin: 0px 0 0 0; 
    background: brown; 
} 
.product, .product-title, .product-all, .product-all div { 
    display: inline-block; 
    height: 100px; 
    vertical-align: top; 
} 
.product-title img { 
    height: 100%; 
    cursor: pointer; 
} 
.product { 
    position: relative; 
    background: yellow; 
} 
.desc { 
    position: absolute; 
    left: 0; 
    width: 100px; 
    height: auto; 
    background: green; 
    color: white; 
    white-space: normal; 
} 


$(document).ready(function() { 

    $('.scroll-pane').jScrollPane(); 
    $(".product-all").hide(100); 
    $(".desc").hide(100); 
    $(".product-title").click(function() { 

     $(".product-all").hide(500); 
     $(".desc").hide(500); 
     $(this).parent().children(".product-all").show(500); 
     $(this).parent().children(".product-title").children(".desc").show(500); 

     var i = 0; 
     var piu = $(this).parent().index(); 
     var wrapper = $(this).parent().parent(); 
     var scroll_shit = 0; 

     while (i < piu) { 
      product = wrapper.children().eq(i); 
      scroll_shit = scroll_shit + product.children(".product-title").width(); 
      i++; 
     } 

     $('.scroll-pane').jScrollPane(); 

     $('.wrapper').animate({ 
      'scrollLeft': scroll_shit 
     }, 500); 
    }); 

}); 

Answer 1

I figured it out :) Voici un fiddle. J'ai utilisé le plugin this et cela fonctionne parfaitement! C'est le seul que j'ai trouvé réactif et qui se met à jour quand le contenu change. Recommande fortement. Et il est super simple à utiliser-

$(".scrollbar-rail").scrollbar();

voilà tout!

J'espère que quelqu'un trouvera cela utile!