Scroll Div withour Scroll bar in asp.net mvc?

Question

I am having the list of users on my page in a div. I want to use scrollbars, but should not visible them on page. only Up and down arrow should be visible. i am using asp.net mvc 3. is this possible ? how to do this ?

Answer 1

A simple CSS may useful for you

In view

 <div id="customerresult" class="itemdetailws">
 </div>

CSS File

.itemdetailws
{
    border: thin dotted #C0C0C0; 
    overflow-y: scroll;
    width: 95%;
    height: 115px;
}

Answer 2

This is really a HTML/CSS/Javascript question.

It needs to be done via javascript, its not possible to customize a scrollbar in a way that works across the majority of browsers.

These links cover some of the CSS approaches

How can one use scroll bar images?

Replace scrollbar within small text area with custom scrollbar

http://www.webkit.org/blog/363/styling-scrollbars/

To do this using javascript, simply use an absolute div within a relative div

something like

<div id="container">
<div id="scrollarea">
</div>
<a id="up-arrow">&nbsp;</a>
<a id="down-arrow">&nbsp;</a>
</div>

With some css like

#container
{
position:relative;
width:300px;
height:400px;
overflow:hidden;
}

#scrollarea
{
position:absolute;
top:0px;
overflow:hidden;
height:800px;
width:280px;
}

#up-arrow
{
background-image:something;
width:20px;
height:20px;
display:block;
position:absolute;
right:0px;
top:0px;
}

some javascript like (using jquery)

var currentScroll=0;
$("#up-arrow").click(function(){
currentScroll+=20;
$("#scrollarea").css("top",currentScroll+"px");
});

$("#down-arrow").click(function(){
currentScroll-=20;
$("#scrollarea").css("top",currentScroll+"px");
});