Post sobre |Dicas blog, Pc windows

Colocar barra rolagem em div, caixa com scroll

Vou mostrar como colocar barra de rolagem no post. Para que seu texto ocupe menos "tamanho" na página?...

Estou me referindo a essa div "caixa ou quadro com barra de rolagem".

Se visitar outro post meu, você verá que esse é diferente, e, é a diferença que estou postando.

Tem gente que gosta dessas janelas com barra de rolagem(scrollbar), e, quando bem feita acaba ficando bonita, talvez eu consiga...

O mais ideal é usar uma imagem de fundo do tamanho da área com a barra de rolagem, ou pouco maior, para não demorar muito para carregar, e, se puder usar as mesmas em outros locais no post e no blog, de modo que quando o visitante vai para outra página, essa irá carregar mais rápido uma vez que a imagem já está em seu computador.

No Mozilla, a propriedade opacity permite dar um grau transparecia a tudo que está nessa div.

No Internet Explorer possivelmente a cor da barra de rolagem obedeça o css usado no meu blog.

Mas, colocar todos seus post com barra de rolagem pode não ser legal, por que nem todos gostam, ainda mais se a área com a barra de rolagem for pequena, e a pessoa tem que rolar muito o mouse, dessa forma não consegue se concentrar na leitura, etc...

Esse é o código html+css para esse quadro com a barra de rolagem, com a imagem(background:) e ele deve ser posto na parte Editar Html quando for postar ou pra quem constrói páginas de site entre as <body> </body>.

<div style="padding: 3px;
background: red url(http://foitestado.com/imagens/elefantes-crepusculo-africa.JPG)
no-repeat left top;
overflow: auto; color: #ffffff;
position: relative;
height: 450px;opacity: 0.6;filter: alpha(opacity=60);-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)';">
SEU TEXTO AQUI, imagens, etc

</div>

Não copie a partir daqui,
Entender alguns códigos Css:
background: fundo da área:
red cor de fundo caso a imagem não apareça, ou for curta, é bom sempre usar uma cor diferente da fonte.
url(http://foitestado.com/imagens/elefantes-crepusculo-africa.JPG)A imagem

no-repeat left top; no-repeat é para a imagem não repetir, e, top e left são os alinhamentos da imagem, que, top= topo e left=esquerdo.
Para a imagem repetir se tiver espaço é só trocar por repeat-y , repeat-x ou apenas retirar o no-repeat.

overflow: auto; Vai fazer a barra de rolagem aparecer, quando o que estiver <DIV>dentro das divs, ou, quadro<DIV> ultrapassar as medidas largura ou altura.

color: #ffffff; O modo mais rápido para cor da fonte branca.
color: #000000; Fonte preta(para fundo claro).


height: 450px; Altura da "caixa de rolagem"
width: 450px; Não usei, mas é a largura, caso queiram deixar mais estreito.

opacity: 0.6; - Torna meio opaco, transparente no Mozilla firefox,Chrome, Opera.
opacity: 0.3; - Muito opaco
opacity: 0.9; - Quase normal.

filter: alpha(opacity=60); - Torna meio opaco no IE7,
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; - Torna meio opaco no IE8

filter: alpha(opacity=30); - Torna muito opaco no IE7,
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; - Torna muito opaco no IE8


<div style="padding: 3px;
background: red url(http://foitestado.com/imagens/elefantes-crepusculo-africa.JPG)
repeat bottom center;
overflow: auto; color: #CCFF66;
position: relative;
height: 380px; opacity: 0.4;">
Alinhamento da imagem bottom=embaixo e right=direito e outras...
</div>






<div style="padding: 23px;
background: red url(http://foitestado.com/imagens/elefantes-crepusculo-africa.JPG)
repeat center;
overflow: auto; color: #ffffff;
position: relative;
height: 650px; opacity: 0.9;filter: alpha(opacity=90);-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';">


Aqui vocês só estão vendo a barra de rolagem por que eu coloquei varias linhas em branco.
Só pra mostrar a imagem alinhada center.
Fiz outras mudanças também, tentem ver a diferença entre essa div e os outros quadros com scroll
</div>



Atualização: Fominomato perguntou como faz para a imagem de fundo ficar parada dentro da DIV com barra de rolagem, porém, no Internet Explorer, e você só verá diferença entre essas DIVs se usar o Internet Explorer, e, se puder use também o Mozilla.


Pensei em usar um Fixed, como se faz para usar background parada, mas, a imagem fica posicionada em relação a página, causando um problema se a página tem grande altura, resolvi usar background em uma DIV por fora da DIV com rolagem, ou seja, como esse código abaixo, tem uma DIV com a altura de 450(height: 450px;) e a imagem de fundo, dentro dessa DIV tem outra DIV com fundo transparente background:transparent; e altura de 410 px mais 40 do padding(abaixo o paddinig é 20, mas ele vale para cima e baixo, isso duplica o valor, o que torna essa DIV do centro com altura de 410+20+20=450px) Finalmente as duas DIVs tem mesma altura.


<div style="background: red url(http://foitestado.com/imagens/elefantes-crepusculo-africa.JPG) repeat center center; color: #ffffff; position: relative; height: 450px; opacity: 0.7;">
<div style="background:transparent; padding:20px; overflow: auto; position: relative; height: 410px;">

TEXTO AQUI ALTURA REAL DESSA DIV 455px

</div></div>


Se observar só existe overflow: auto; na DIV do meio, isso deixa ela com barra de rolagem
Imagem de fundo
Imagem Background

13 comentários:

Colocar barra rolagem em div, caixa com scroll2008-10-13T05:17:00-03:00
  1. Este foitestado é um tremendo blog, parabéns bons tutoriais bem explicados, aprendi muito sobre:mudar a cor de fundo da pagina do meu blog - mudando em "BODY". OBRIGADO.

    Responder
  2. cara tem um problema no IE(como sempre o IE) é que o seguinte:
    - background fica rolando junto ao texto no fundo, tem como fazer alguma mutreta para travar o texto?

    Responder
  3. Fominomato

    Adicionei uma DIV nesse post, observe a ultima div, acho que é uma forma de burlar esse problema, não conheço nem uma maneira usando apenas Css, mas inserindo outra div pode resolver, apenas deve ter um certo cuidado coma as medidas como altura, margin e padding.

    Responder
  4. Muito bom!! principalmente para quem quer deixar o blog com um visual profissional!

    Responder
  5. Diego24/6/10

    Muito bom, porém gostaria de saber como fazer p/ mudar a cor da barra de rolagem no firefox...

    vendo seus exemplos, a barra ficou azul, como q vc fez???

    Vlw!!!

    Responder
  6. Diego

    Não tem como mudar a cor da barra de relagem no mozilla, o que acontece é que tem a função opacity:que deixa a div semi transparente, e, como você pode ver a cor de fundo da div externa é azul, por isso a barra fica um pouco azulada, o problema do opaco(transparente) é que todos os elementos internos ficam também opacos e não tem como mudar isso, não com Css, fica um pouco ruim de ler.

    Responder
  7. Diego30/6/10

    Entendi, obrigado pela resposta xD

    Responder
  8. Alguém poderia me ajudar? Primeiro quero agradecer pelo tutorial,me ajudou muito. Porém esta caixa com scroll e fundo não pega no orkut quando se edita o about em html. Haveria um modo de me ajudarem?

    Responder
  9. Sutcliff Poe

    Você tem certeza que o Orkut aceita Html, eu não entendo nada de orkut, mas as vezes que visitei esse site não encontrei nem uma opção para mexer com Html, geralmente as redes sociais não permitem essas coisas, elas são mais para coisas do tipo troca de mensagens, ideias e coisas do tipo, talvez eles não acham interessante permitir ações que fujam dessa linha.

    Responder
  10. Anônimo5/8/11

    Otima materia, estava com problemas em minha home, com e a materia caiu como uma luva, PARABENS.


    s.sales

    Responder
  11. Cara achei legal mais pra mim consegui com html bota rolagem na div eu tive que olha no código fonte do site, mais valew ajudo muito mais muito mesmo sério ADM valew.

    Responder
  12. eu so quero a barra para mover um texto no meu blog

    Responder

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!