Lazybars – Plugin jQuery de barra de rolagem responsiva com tema CSS

Veja em CodeCanyon Preço $10

 Nota: este post tem links de afiliados. Ao clicar e fazer compras ganhamos comissões. Obrigado!

Lazybars é um plugin jQuery com barra de rolagem temática e fácil de usar.
Você pode implementar essas barras de rolagem apenas adicionando um nome de classe a qualquer elemento rolável em seu site.
Use os temas incluídos no Lazybars ou crie o seu próprio com um pouco de CSS simples.
Uma licença regular permite o uso em um site.

Última versão do Lazybars 1.6.5 (20 de fevereiro de 2018)

Documentação | Changelog | Comentários | Exemplos | Suporte – FAQs

Se você gosta do Lazybars, reserve um segundo para avaliá-lo… Obrigado.

Apoiar

Se precisar de suporte, use o fórum de suporte e as FAQs. Entrarei em contato com você o mais breve possível. Qualquer mensagem direta pode ter resposta atrasada.

Para aderir aos termos e condições de suporte do mercado Envato, o suporte será fornecido por 6 meses após a compra, com opção de extensão durante a compra.

Se você encontrar algum bug e/ou quiser sugerir algum recurso, deixe um comentário e todos eles serão lidos e considerados.

Guia rápido

Como este é um plugin jQuery, você precisará usar jQuery no seu site.

Carregar o lazybars pasta para a pasta pública no seu servidor.

Vincule o Lazybars CSS ao seu site, no <head> marcação.

<!-- Lazybars stylesheet -->
<link rel="stylesheet" type="text/css" href="lazybars/css/lazybars.min.css">

Adicione o Lazybars Javascript abaixo da biblioteca jQuery.

<!-- jQuery -->
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Lazybars Javascript -->
<script src="lazybars/js/jquery.lazybars.min.js"></script>

Adicione o nome da classe lazybars-x ou lazybars-y para qualquer elemento rolável em seu HTML
```
<div class="lazybars-y">
    ...
</div>
```

Exemplo HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Lazybars example page</title>
        <!-- Lazybars stylesheet -->
        <link rel="stylesheet" type="text/css" href="lazybars/css/lazybars.min.css">
    </head>
    <body>
        <div class="lazybars-y">
            ...
        </div>
        <!-- jQuery -->
        <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
        <!-- Lazybars Javascript -->
        <script src="lazybars/js/jquery.lazybars.min.js"></script>
    </body>
</html>

Opções

Há várias opções para que você possa personalizar Lazybars. Você pode usar essas opções usando atributos de dados.

<div class="lazybars-y" data-position="left" data-fade="true" data-offset="-5">
    ...
</div>

Para uma lista completa de opções e implementação avançada, consulte a Documentação

Veja em CodeCanyon Preço $10