Scroll continua rolando mesmo quando acaba o conteúdo

Thais Calil Baio · October 10, 2011

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>

Sign In

Scroll continua rolando mesmo quando acaba o conteúdo

Question

Thais Calil Baio

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Forum Statistics

Browse

Activity