2

Eu tenho uma div com muito texto, e quero que ao carregar a página a div começe a fazer scroll automático mostrando o texto todo...

html:

  <div id="corpo">     
    <p> Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia,
        Titulo da notícia,Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia
        Titulo da notícia, Titulo da notícia, Titulo da notíciaTitulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia,
        Titulo da notícia,Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia
        Titulo da notícia, Titulo da notícia, Titulo da notíciaTitulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia,
        Titulo da notícia,Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia
        Titulo da notícia, Titulo da notícia, Titulo da notíciaTitulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia,
        Titulo da notícia,Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia
        Titulo da notícia, Titulo da notícia, Titulo da notíciaTitulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia,
        Titulo da notícia,Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia
        Titulo da notícia, Titulo da notícia, Titulo da notícia</p>
</div>

css:

 #corpo
{
    background-color:#000066 ;
    opacity: 0.8;
    filter: alpha(opacity=50);
    width:1000px;
    height:380px;
    position:fixed;
    top:240px;
    left:180px;
    z-index:3;
    overflow: scroll;
    color:white;      
    font-family:Arial;
    font-size:20px;
    font-style:normal;
    font-weight:bold;
}
2
  • Qual a intenção do scroll automático? Commented 18/05/2015 às 15:07
  • Ana, quando você diz, "mostrar o texto todo", você gostaria que a div se expandisse para que todo o texto ficassev visivel ou que a barra de rolagem fosse se movendo automaticamente rolando para baixo ? se for a segunda opção você terá de usar javascript. Commented 18/05/2015 às 15:16

1 Resposta 1

4

Utilizando Jquery:

$().ready(function(){
$("#corpo").animate({ scrollTop: 1000 }, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id='corpo' style='height:100px; overflow:scroll; width:500px;'>
Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia,
        Titulo da notícia,Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia
        Titulo da notícia, Titulo da notícia, Titulo da notíciaTitulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia,
        Titulo da notícia,Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia
        Titulo da notícia, Titulo da notícia, Titulo da notíciaTitulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia,
        Titulo da notícia,Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia
        Titulo da notícia, Titulo da notícia, Titulo da notíciaTitulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia,
        Titulo da notícia,Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia
        Titulo da notícia, Titulo da notícia, Titulo da notíciaTitulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia,
        Titulo da notícia,Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia
        Titulo da notícia, Titulo da notícia, Titulo da notícia
</div>

1
  • era exatamente o que eu precisava! muito obrigado! Commented 2/03/2017 às 19:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .