![](https://previews.customer.envatousercontent.com/files/92218736/lazybars.promo.png)
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
oulazybars-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
Artigos Relacionados