1

我有一个宽度变化的 div,因为在它里面我有水平手风琴。我需要为它制作一个自定义滚动条。我尝试了 2 个插件:thisthis,这些都不起作用。也许你们中的一些人有类似的问题?提前致谢!

小提琴

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

});
4

1 回答 1

1

我想通了:) 这是一个小提琴。我使用了这个插件,它工作得很好!它是我发现的唯一一个在内容更改时响应并自行更新的。强烈推荐。而且使用起来超级简单——

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

-就这些!

希望有人会发现这很有用!

于 2015-11-11T14:16:13.263 回答