Question

I hope to create scroll view likes the attached image

it will not display the horizontal scroll bar, but display the arrow at top and bottom.
when user’s mouse move over them, it will scroll and display more items

Is there any library/jquery extension can do this?

Welcome any comment

Answer 1

You can choose a library and easily achieve this.

First, here’s the working jsFiddle link

Here’s the code for it ->

Structure

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

The CSS

Note: Anything marked with required must be there, everything else is optional.

#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;    
}

The jQuery

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

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