Hoje, podemos utilizar somente CSS para alterar a personalização da barra de rolagem de uma DIV? Se sim como posso fazer. Caso contrário qual o melhor script e como usá-lo?
2 Respostas
Definir estilos para scrollbar
é uma raridade, eles não são parte do padrão W3C para css, e portanto,a maioria dos navegadores simplesmente ignoram.
Porém existem Webkits
que permitem a customização, em meus testes não consegui encontrar um que tivesse suporte a todos os navegadores atuais.
No link acima possui um exemplo, o mesmo funcionará no Google Chrome, mas em outros como Firefox e IE não fará efeito.
Procurei no W3C
e encontrei o seguinte:
Atualmente, Não existe nenhuma forma de customização do scroll compatível com todos os navegadores. O artigo W3C Menciona no final a seguinte declaração em sexta-feira 07 de agosto de 2015 18:50:04:
Alguns navegadores (IE,konqueror) suportam propriedades que não fazem parte do padrão como scrollbar-shadow-color
, scrollbar-track-color
e outras.
Essas propriedades são ilegais, elas não são definidas em qualquer especificação CSS
nem são identificadas como propriétárias (prefixando-os com "-vendor-").
Neste topico no StackOverFlow e abordado esta questão e uma das abordagens mais assertivas e usar um plugin, Alguns deles:
-
3Gabriel, deste exatamente a mesma resposta que noutra pergunta. Acho que seria caso de marcar a pergunta como duplicada ou adaptar a resposta para ser mais exata ao problema do AP.– SergioCommented 1/10/2015 às 20:58
-
@Sergio o scrollbar trabalha do mesmo jeito em
div
portanto seria melhor marca-la como duplicada mesmo. Commented 1/10/2015 às 21:01
Utilizando apenas CSS é possível sim customizar. Porém creio que não funcione no IE (nenhuma versão).
Nesse link http://www.codeproject.com/Tips/674478/Customize-Scrollbars-using-CSS tem o passo a passo tudo muito bem explico e com link para fazer download do código fonte.
O ideal seria aplicar isso apenas para conteúdo dentro do seu website, como podemos ver aqui http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html.