用asp.net mvc中的滚动条滚动Div?

时间:2011-10-13 04:16:46

标签: html css asp.net-mvc-3 scroll

我在div中有我的页面上的用户列表。我想使用滚动条,但不应在页面上看到它们。只能看到向上和向下箭头。我正在使用asp.net mvc 3.这可能吗?怎么做?

2 个答案:

答案 0 :(得分:1)

简单的CSS可能对您有用

在视图中

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

CSS文件

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

答案 1 :(得分:0)

这实际上是一个HTML / CSS / Javascript问题。

需要通过javascript完成,无法以适合大多数浏览器的方式自定义滚动条。

这些链接涵盖了一些CSS方法

How can one use scroll bar images?

Replace scrollbar within small text area with custom scrollbar

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

要使用javascript执行此操作,只需在相对div中使用绝对div

类似

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

有一些像

这样的CSS
#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;
}

一些javascript(使用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");
});