javascript - スクロールバーを表示しないjqueryスクロールビュー

Question

添付画像のようなスクロールビューを作成したい

水平スクロールバーは表示されませんが、上下に矢印が表示されます。ユーザーのマウスがそれらの上に移動すると、スクロールしてより多くのアイテムが表示されます

これを実行できるlibrary/jquery拡張機能はありますか？

コメントを歓迎します

Answer 1

ライブラリを選択して、これを簡単に実現できます。

まず、ここに作業中のjsFiddleリンクがあります

これがそのコードです->

構造

<a href="#" class="prev"></a>
<div id="container">
    <div class="items">
        <div class="item"> Item 1 </div>
        <div class="item"> Item 2 </div>
        <div class="item"> Item 3 </div>
        <div class="item"> Item 4 </div>
        <div class="item"> Item 5 </div>
        <div class="item"> Item 6 </div>
        <div class="item"> Item 7 </div>
        <div class="item"> Item 8 </div>
        <div class="item"> Item 9 </div>
        <div class="item"> Item 10 </div>
        <div class="item"> Item 11 </div>
    </div>
</div>
<a href="#" class="next"></a>

CSS

注:必須とマークされているものはすべてそこにある必要があり、それ以外はすべてオプションです。

#container{
    position:relative; /* required */
    overflow:hidden; /* required */
    height:400px; /* required */
    width:180px; /* required */ 
    margin:0px auto;    
}
.items{
    height:10000em;/* required */
    width:180px; /* required */
    position:absolute; /* required */   
}
.item{
    height:55px; /* required */
    margin:10px 0;
    border:1px solid #ddd;    
}

jQuery

$('#container').scrollable({'vertical' : 'true'});

この例では、jQuery ツールが提供するスクロール可能なウィジェットを利用しました。