jquery滚动视图，不显示滚动条

Question

我希望创建滚动视图，如附加图像

它不会显示水平滚动条，但会在顶部和底部显示箭头。 当用户的鼠标移过它们时，它将滚动并显示更多项目

是否有任何库/ jquery扩展可以做到这一点？

欢迎任何评论

Answer 1

您可以选择一个库并轻松实现这一目标。

First, here's the working jsFiddle link

以下是代码 - ＆gt;

<强>结构

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

For this example, I leveraged the scrollable widget provided by jQuery Tools