javascript - 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

注意：任何标有required的东西都必须在那里，其他的都是可选的。

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