jQuery滾動視圖而不顯示滾動條

Question

我希望創建喜歡附件圖像的滾動視圖

它不會顯示水平滾動條，而是在頂部和底部顯示箭頭。 當用戶的鼠標移到它們上方時，它將滾動並顯示更多項目

有沒有任何庫/ 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 Tools提供的可滾動小部件