如果你想自己做,它会是这样的:
您定义了一些样式:
* { padding:0; margin:0; }
.container { padding:0 10px; margin:0; background-color:#444; width:400px; height:400px; overflow:hidden; }
.scrollable { background-color:#5a5; width:100%; height:800px; position:relative; top:0; }
p { margin:0 0 30px 0; }
然后是html:
<div class="container">
<div class="scrollable">
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
<p>Line 4</p>
<p>Line 5</p>
...
</div>
</div>
您可以使用 Jquery 更改元素的“顶部”位置:
function scroll(target, x)
{
$(target).animate({ top: x, duration: 2000});
}
您可以从鼠标滚动、正在移动的处理程序或其他一些事件中调用这样的函数:
scroll(".scrollable", "50%");
但是,正如其他人指出的那样,根据您的要求,使用现有的库可能会更好。