我正在尝试实现垂直滚动。单击“向下”-div 时,它将向上移动 1 个格,当单击“向上”-div 时,它将向下移动 1 个格。但它只适用于第一次点击。用户应该能够向下单击直到最后一个 div,然后应该禁用“向下”-div。
HTML:
<div id="up">up</div>
<div id="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
<div class="child">10</div>
<div class="child">11</div>
</div>
<div id="down">down</div>
CSS:
#parent{
width:300px;
height:288px;
border:1px solid #000;
overflow:hidden;
}
.child{
width:300px;
height:48px;
border:1px solid #FF0000;
}
#up{
width:30px;
height:20px;
background-color:#006600;
cursor:pointer;
}
#down{
width:40px;
height:20px;
background-color:#006600;
cursor:pointer;
}
Javascript:
$(document).ready(function(){
$('#down').live("click",function(){
var scrollval = $('.child').height();
$('#parent').scrollTop(scrollval);
});
$('#up').live("click",function(){
var scrollval = $('.child').height();
$('#parent').scrollTop(-scrollval);
});
});
jsfiddle:http: //jsfiddle.net/XGXvD/