Пользовательская полоса прокрутки для контейнера с изменяющейся шириной

Question

У меня есть div с изменяющейся шириной, потому что внутри у меня горизонтальный аккордеон. Мне нужно создать пользовательскую полосу прокрутки. Я попробовал 2 плагина: this и this, ни один из них не работал. Может, некоторые из вас столкнулись с подобной проблемой? Спасибо заранее!

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

Я понял это :) Вот fiddle. Я использовал плагин this, и он отлично работает! Это единственное, что я обнаружил, что оно реагирует и обновляется при изменении контента. Настоятельно рекомендую. И это супер просто потребительной

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

, то есть все!

Надеюсь, что кто-то найдет это полезным!