Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Gilberto Jr

Barra de Rolagem de uma Div

Por , em Desenvolvimento frontend

Recommended Posts

Gilberto Jr    26

Gilberto Jr
Postado

Boa tarde.

 

Existe algum código que eu coloque que eu consiga mudar a barra de rolagem de uma div?

 

Os que já consegui nenhum deu certo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Xavier    189

Marcos Xavier
Postado

Pesquisa no google sobre "div com barra de rolagem personalizada", especialmente os que falam sobre jsScrollbar

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gilberto Jr    26

Gilberto Jr
Postado

Sim Ner0, eu tenho essa código aqui

scrollbar-arrow-color: #666666;
scrollbar-base-color: #666666;
scrollbar-dark-shadow-color: #666666;
scrollbar-track-color: #666666;
scrollbar-face-color: #666666;
scrollbar-shadow-color: #666666;
scrollbar-highlight-color: #666666;
scrollbar-3d-light-color: #666666;

mas não funciona.



Ok Marcos Xavier vou procurar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Não utilize CSS para personalizar a barra de rolagem do seu elemento. Sinceramente, essa propriedade não vale a linha que você escreve.

Vou te recomendar alguns plugins em jQuery que, pessoalmente, gosto muito de trabalhar:
LionBars :seta: http://charuru.github.com/lionbars/ (demo do Lion)
Custom Scrollbar :seta: http://manos.malihu.gr/jquery-custom-content-scroller/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gilberto Jr    26

Gilberto Jr
Postado

Eu achei esse código aqui e apliquei ele na minha página e não foi também.

<script type="text/javascript" language="javascript" src="jquery/jquery-mousewheel.js"></script>
<script type="text/javascript" language="javascript" src="jquery/jquery-ui.js"></script>
<link rel="stylesheet" href="jquery/jScrollbar.jquery.css" type="text/css" />
<script type="text/javascript" language="javascript" src="jquery/jScrollbar.jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery/jScrollbar.jquery.min.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
    $(".ComentarioVideo").jScrollbar({
      allowMouseWheel : true,
      scrollStep : 10,
      showOnHover : true,
      position : 'right'
    });
  })
</script>

Diéssica poderia colocar um exemplo como ficaria na minha página HTML?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Consulte os sites que postei, escolha um dos plugins e tente implementá-lo.

Qual dos dois especificamente você achou mais apropriado para o seu site? Tente ler a documentação, está disponível em ambos links, com diversos exemplos.

Caso continue com dúvidas sobre a fácil implementação, volte a postar. :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

alexsouzaweb    2

alexsouzaweb
Postado

Olá Gilberto.

 

Existe sim.

 


Essas são algumas propriedades para se alterar o scrollbar de uma DIV:

{ 
scrollbar-3d light-color:#000000; 
scrollbar-arrow-color:#000000; 
scrollbar-base-color:#000000; 
scrollbar-dark-shadow-color:#000000; 
scrollbar-face-color:#000000; 
scrollbar-highight-color:#000000; 
scrollbar-shadow-color:#000000; 
}

Faça alguns testes e veja o que quer.

 

Existe também um Pluggin chamado JScrollBar http://www.webmaster.pt/barras-rolagem-estilizadas-jscrollbar-13071.html

 

Esse sim é muito interessante. Porém deve tomar cuidado nas declarações de META e DOCTYPE. Pois é sempre trabalhoso fazer funcionar no IE.

 

Qualquer dúvida, posta ae.

 

Abs,

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

bhion    1

bhion
Postado

 

::-webkit-scrollbar { } /* affects the whole scrollbar */
::-webkit-scrollbar-button { } /* arrow buttons */
::-webkit-scrollbar-track { } /* slider area */
::-webkit-scrollbar-thumb { } /* slider */
::-webkit-scrollbar-corner { } /* sizer (only visible in TEXTAREA) */

::-webkit-scrollbar {
  width: 10px;
  background:#666;
  opacity:0.65;
  -moz-opacity: 0.65;
  filter: alpha(opacity=65);
}

::-webkit-scrollbar-thumb {
  border: 2px dotted #B884C2;;
  border-radius: 10px;
  background: #B884C2;
}

::-webkit-scrollbar-thumb:hover {
  background: #B884C2;
}

::-webkit-scrollbar-thumb:active {
  background: dashed #B884C2;
  opacity:0.65;
  -moz-opacity: 0.65;
  filter: alpha(opacity=65);
 
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gilberto Jr    26

Gilberto Jr
Postado

Eu coloquei os codigos que estão nas páginas de exemplo como foi me passado. O meu código esta assim

<!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=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="jquery/jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery/jquery-mousewheel.js"></script>
<script language="javascript" type="text/javascript" src="jquery/jquery-ui.js"></script>
<script language="javascript" type="text/javascript" src="jquery/jScrollbar.jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery/jScrollbar.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/jScrollbar.jquery.css" media="screen" />

                                         
<script type="text/javascript">
    $(document).ready(function(){
    // simple jScrollbar plugin call
    $('.jScrollbar').jScrollbar();
    // more complex jScrollbar plugin call
    $('.jScrollbar').jScrollbar({
        scrollStep : 25,
        position : 'left',
        showOnHover : true
    });
});
</script>


</head>

<body>

<!-- Main container -->
<div class="jScrollbar">
    <!-- Scrolling content container -->
    <div class="jScrollbar_mask">
        <p>
        <!-- Your long content here -->
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi...
        </p>
    </div>
    <!-- slider container -->
    <div class="jScrollbar_draggable">
        <!-- slider -->
        <a href="#" class="draggable"></a>
    </div>
    <!-- don't forget to clear the floats -->
    <div class="clr"></div>
</div>

</body>
</html>

E não esta funcionando.



bhion os dois "::" seria o que? No caso seria a div?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito