Ola, estou criando uma espécide de scroll vertical, porém so com os botões de subir e descer. Está praticamente pronto, porém estou tendo um problema. O scroll continua rolando mesmo quando o conteúdo já acabou. alguém saberia como consertar isso no meu código? Coloquei um comentário no if que acho que deverá ter a solução. Desde já obrigado. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#dm-box-secretarias {position:relative; width:215px; height:160px; overflow:hidden;}
#dm-box-secretarias .dm-conteudo-secretarias {position:absolute; height:100%; margin-top:0;}
#dm-box-secretarias .dm-conteudo-secretarias > ul { list-style:none; width:215px; margin-top: 10px;}
#dm-box-secretarias .dm-conteudo-secretarias > ul li{ height:30px;}
#dm-box-secretarias .dm-conteudo-secretarias > ul.dm-itens-secretarias li a{font:12px/12px Arial, Helvetica, sans-serif;color:#000; border-bottom:1px dotted #999;display:block; text-decoration:none; background:url(dm-arrow-mini-bullet.png) no-repeat left; padding-left:10px; }
.dm-bg-next {list-style:none;position:absolute;margin-left:80px; margin-top:-20px;}
.dm-bg-prev {list-style:none;position:absolute;margin-left:80px;margin-top:-180px;}
.dm-prev, .dm-next {color:#000;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
window.boxHeight = $(".dm-conteudo-secretarias > ul").height();
window.boxLiHeight = $(".dm-conteudo-secretarias > ul li").height();
window.boxQtdLi = (($(".dm-conteudo-secretarias > ul li").length));
window.boxMaxHeight = boxLiHeight * boxQtdLi;
if(boxQtdLi <= 6) {
$('.dm-next').css('display','none');
$('.dm-prev').css('display','none');
} // pra aparecer as setinhas somente quando tiver mais de 6 itens
$('.dm-next').bind('click', function(){
var deslocamento = parseInt($('.dm-conteudo-secretarias > ul').css("margin-top")); // atribui o valor da margin-top à variavel deslocamento
$('.dm-conteudo-secretarias > ul').animate({'margin-top' : deslocamento - 2*boxLiHeight}, "easeOutBounce", function(){
window.boxAnimating = false; // pra descer de 2 em 2 itens
});
//if que eu não consegui
if(deslocamento >= boxMaxHeight) {
alert("deslocamento")
}
});
$('.dm-prev').bind('click', function(){
var deslocamento = parseInt($('.dm-conteudo-secretarias > ul').css("margin-top")); // atribui o valor da margin-top à variavel deslocamento
if(deslocamento === 10)// para parar de rolar quando voltar tudo
return;
$('.dm-conteudo-secretarias > ul').animate({'margin-top' : deslocamento + 2*boxLiHeight}, "easeOutBounce", function(){
window.boxAnimating = false; // para subir de 2 em 2 itens
});
});
});
</script>
</head>
<body>
<div id="dm-box-secretarias">
<div class="dm-conteudo-secretarias">
<ul class="dm-itens-secretarias">
<li> <a href="#"> dfsd </a> </li>
<li> <a href="#"> fsdfs </a> </li>
<li> <a href="#"> sdfffffff </a> </li>
<li> <a href="#"> sdfsdfsfdf </a> </li>
<li> <a href="#"> Osdf </a> </li>
<li> <a href="#"> fgdfgdfgdgdfg </a> </li>
<li> <a href="#"> dfgdfgfg </a> </li>
<li> <a href="#"> fggdfgfdgd </a> </li>
<li> <a href="#"> fgdgdfgdf </a> </li>
<li> <a href="#"> dfgdgdfg </a> </li>
<li> <a href="#"> Odfgggg </a> </li>
<li> <a href="#"> dfgggdfgdfgdfg </a> </li>
<li> <a href="#"> dfgdfgrred </a> </li>
</ul>
</div>
</div>
<ul>
<li class="dm-bg-prev"><a href="#" title="Anteriores" class="dm-prev">Volta</a></li>
<li class="dm-bg-next"><a href="#" title="Próximos" class="dm-next">Próximos</a></li>
</ul>
</body>
</html>