Barras De Rolagem Estilizadas Com jScrollBar

Não é exagero dizer que é um verdadeiro sonho para os webdesigners poderem contar com barras de rolagem estilizadas no site (estou falando sem utilizar flash). Um dos eternos “entraves” para que aquele que mexe com design para web considerar o site como de qualidade, é não apresentar barras de rolagem mais condizentes com a identidade visual do site, mas sim aquele cinza-padrão sem nenhuma questão de ser interessante…

Mas agora essa insatisfação pode acabar, já que é possível estilizar e fazer das barras de rolagem mais bonitas e interessantes utilizando jScrollBar!

Com jScrollBar, você pode mudar o estilo padrão das barras de rolagem do site, podendo fazer aparecer imagens e, usando CSS, estilizar das mais variadas formas possíveis. Tudo de maneira simples e fácil de se implementar.


Quando você baixar o jScrollBar, vai encontrar no .zip os javascripts e css necessários para fazer tudo funcionar – também há algumas imagens de exemplo para se ter melhor noção de como é o funcionamento do plugin. Insira esses javascripts e css no cabeçalho de seu documento.

É preciso que seus elementos que irão apresentar a barra de rolagem personalizada sigam uma estrutura como essa:

Código:

<!-- Container principal -->
<div class="jScrollbar">

        <!-- Container do conteúdo do scroll -->
        <div class="jScrollbar_mask">
                <p>
                        <!-- Conteúdo -->
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi...
                </p>
        </div>

        <!-- Container do slider -->
        <div class="jScrollbar_draggable">
                <!-- Slider -->
                <a href="#" class="draggable"></a>
        </div>
     
        <!-- Lembre-se de dar o clear nos floats -->
        <div class="clr"></div>
</div>

Então, basta inicializar o jScrollBar:

Código:

<script type="text/javascript">                                         
        $(document).ready(function(){
                $('.jScrollbar').jScrollbar();
        });                                       
</script>

Existem 2 opções no jScrollBar:

° allowMouseWheel. Permite rolar com a roda do mouse (default ‘true’).
° scrollStep. Velocidade da rolagem quando allowMouseWheel é “true” (default ’10′).

Então, por exemplo, se quiséssemos uma velocidade de rolagem 15 para nosso elemento, teríamos:

Código:

 $(document).ready(function(){
                $('.jScrollbar').jScrollbar({
                scrollStep: 15
                });
        });         

Utilizando o jScrollBar, é possível fazer com que as barras de rolagem de seu site fiquem com a aparência diferente, podendo, ao usar sua criatividade, dar qualquer visual a suas scrollbars.

Certamente esta é uma excelente maneira para incrementar o design do site e fazer com que as coisas fiquem mais coincidentes com a identidade visual do projeto. Certamente é uma excelente pedida!

Fonte : WebMaster

ótimo tutorial obrigado!