Deseja adicionar uma barra de rolagem personalizada no WordPress? Alterar a aparência da barra de rolagem pode fazer você se destacar ao criar um tema personalizado para o seu site.
Neste artigo, mostraremos como adicionar facilmente uma barra de rolagem personalizada no WordPress. Mostraremos duas soluções e você pode escolher uma que melhor lhe convier.
Problemas com cores personalizadas da barra de rolagem
Por padrão, o CSS não inclui um conjunto de regras que você pode usar para alterar as propriedades da barra de rolagem. Existem algumas sugestões para adicionar isso, mas a maioria dos navegadores atualmente não é compatível.
Para contornar isso, designers e desenvolvedores usam elementos pseduo específicos do navegador ou JavaScript para substituir a aparência padrão da barra de rolagem.
Vamos mostrar as duas técnicas. No entanto, lembre-se de que você precisa testar seu site com diferentes navegadores e dispositivos para garantir que ele funcione corretamente em todos os navegadores.
Vejamos como adicionar cores personalizadas da barra de rolagem no WordPress.
método 1. Adicione uma barra de rolagem personalizada no WordPress com um plug-in
Este método é mais fácil e é recomendado para a maioria dos usuários. No entanto, navegadores móveis não são ados.
Primeiro de tudo você precisa instalar e ativar o plug-in Advanced Scroll Bar. Para obter mais informações, consulte nosso guia o a o para instalar um plugin do WordPress.
Após a ativação, você deve ir Configurações »Configurações definidas pelo usuário para a barra de rolagem colorida Configure a página do plug-in.
A partir daqui, você pode alterar a cor da barra de rolagem e as cores de fundo da barra de rolagem. Você pode então selecionar a etapa de rolagem do mouse, que é a velocidade de rolagem da roda do mouse.
Você também pode optar por ocultar automaticamente a barra de rolagem ou sempre mostrá-la.
Você pode escolher a opção Somente cursor, que mostra a barra de rolagem, mas não o botão.
Abaixo disso, você encontrará opções para definir a velocidade de rolagem, alterar a orientação do trilho (esquerda ou direita) e ativar o comportamento do toque.
Não se esqueça de clicar no botão "Salvar alterações" para salvar suas configurações.
Agora você pode visitar seu site para ver as cores de suas barras de rolagem personalizadas em ação.
método 2. Adicione cores personalizadas da barra de rolagem no WordPress com CSS
Este método usa CSS para formatar sua barra de rolagem. Isso é mais rápido do que usar o jQuery.
No entanto, ele funciona apenas em navegadores de desktop que usam um mecanismo de renderização do WebKit como Google Chrome, Safari, Opera e outros.
Isso não tem efeito em navegadores móveis ou Firefox e Edge em computadores desktop.
Você precisa adicionar o seguinte CSS personalizado ao seu tema WordPress.
:: – webkit-scrollbar {
-webkit-aparecimento: nenhum;
}
:: – webkit-scrollbar {
largura: 10 px;
}
:: – webkit-scrollbar-track {
plano de fundo: # ffb400;
borda: 1px sólido #ccc;
}
:: – webkit-scrollbar-thumb {
plano de fundo: # cc00ff;
borda: 1px sólido #eee;
altura: 100px;
raio da borda: 5px;
}
:: – webkit-scrollbar-thumb: hover {
fundo: azul;
}
Você pode alterar cores e outras propriedades CSS a qualquer momento.
Não se esqueça de salvar suas alterações quando estiver satisfeito. Você pode visualizá-lo em um navegador compatível.
Era o que parecia no nosso site de demonstração enquanto era exibido no Google Chrome em um computador Mac.
Esperamos que este artigo tenha ajudado você a aprender como adicionar uma barra de rolagem personalizada no WordPress. Você também pode querer ver nosso guia sobre como criar um design WordPress personalizado sem precisar escrever código.
Se você gostou deste artigo, assine o nosso YouTube Canal para tutoriais em vídeo do WordPress. Você também pode encontrar-nos em Twitter e Facebook.
