我有一个改变宽度的div，因为在里面我有水平手风琴。我需要为它制作一个自定义滚动条。我尝试了2个插件：this和this，但这些都没有效果。也许你们有些人遇到过类似的问题？ 提前谢谢！
<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);
});
});