这是使用ScrollTo() jQuery 插件的解决方案。
jsFiddle 示例...以及另一个使用, (scrollbar hidden)的示例。overflow:hidden
(在示例中单击父元素滚动...)
显然,没有插件也可以创建类似的东西,但如果你想要实际的滚动功能,我认为使用它是最简单的。
jQuery
var clicks = 300;
$('#parent').click(function(){
$('#parent').scrollTo(clicks);
clicks += 300;
if(clicks>1200){
clicks=0;
}
});
HTML
<div id="parent">
<div class="child" id="c1">1</div>
<div class="child" id="c2">2</div>
<div class="child" id="c3">3</div>
<div class="child" id="c4">4</div>
<div class="child" id="c5">5</div>
</div>
CSS
#parent {
width:200px;
height:300px;
overflow-x:hidden;
overflow-y:auto;
background:yellow;
}
#parent:hover {
cursor:pointer;
}
.child {
width:200px;
height:300px;
font-size:100px;
text-align:center;
line-height:300px;
color:white;
}