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提供的可滚动小部件