O editor de Downcodes mostrará como usar CSS para personalizar o estilo da barra de rolagem! O estilo padrão das barras de rolagem da página da web às vezes é difícil de atender às necessidades personalizadas. Este artigo apresentará em detalhes como usar o pseudoelemento ::-webkit-scrollbar do CSS e seus subconjuntos (::-webkit-scrollbar-thumb, :: -webkit-scrollbar- track, ::-webkit-scrollbar-button, etc.) para personalizar o tamanho, cor, borda, sombra e outros atributos da barra de rolagem para criar uma experiência de usuário mais bonita. Veremos como personalizar os estilos básicos da barra de rolagem, estilos de controle deslizante e de trilha, estilos de botão e como lidar com designs mais complexos e diferentes problemas de compatibilidade do navegador. O artigo também inclui respostas a perguntas frequentes para ajudá-lo a entender e aplicar melhor as técnicas de personalização da barra de rolagem CSS.
A chave para personalizar estilos de barra de rolagem CSS é usar o pseudoelemento ::-webkit-scrollbar e seus subconjuntos de pseudoelementos relacionados, como :::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track, ::-webkit -botão da barra de rolagem etc. Através desses pseudoelementos, você pode controlar o tamanho, cor, borda, sombra e outras propriedades da barra de rolagem. Entre eles, ::-webkit-scrollbar-thumb controla o estilo do controle deslizante e é o ponto de personalização mais comum. Você pode definir a cor, borda, cantos arredondados ou sombra do controle deslizante para alterar a aparência do controle deslizante da barra de rolagem.
O estilo de barra de rolagem personalizada em CSS usa principalmente a série de pseudoelementos ::-webkit suportada pelo navegador principal do Webkit. A largura e a cor da barra de rolagem podem ser alteradas configurando ::-webkit-scrollbar.
Por exemplo, personalize a largura da barra de rolagem para 5px e defina a cor de fundo como cinza:
::-webkit-barra de rolagem {
largura: 5px;
cor de fundo: #f9f9f9;
}
Adicione sombra e cantos arredondados à barra de rolagem:
::-webkit-barra de rolagem-thumb {
cor de fundo: #c1c1c1;
raio da borda: 10px;
box-shadow: inserção 0 0 6px rgba (0,0,0,0,5);
}
Para controlar com precisão os estilos do polegar e da trilha na barra de rolagem, você pode definir os estilos de ::-webkit-scrollbar-thumb e ::-webkit-scrollbar-track respectivamente.
Personalize o estilo do controle deslizante da barra de rolagem para aumentar o efeito interativo:
::-webkit-barra de rolagem-thumb {
cor de fundo: #b6b6b6;
raio da borda: 10px;
transição: facilidade de 0,2s da cor de fundo;
}
::-webkit-scrollbar-thumb:hover {
cor de fundo: #a8a8a8;
}
Personalize o estilo da trilha para tornar a barra de rolagem mais consistente com o design geral:
::-webkit-scrollbar-track {
cor de fundo: #e1e1e1;
raio da borda: 10px;
}
Os botões da barra de rolagem podem ser importantes para páginas longas. Eles estão localizados em ambas as extremidades da barra de rolagem e seus estilos podem ser definidos usando o pseudoelemento ::-webkit-scrollbar-button.
Embeleze o botão da barra de rolagem e torne a barra de rolagem geral mais harmoniosa:
::-webkit-scrollbar-button:start:decremento,
::-webkit-scrollbar-button:end:increment {
exibição: bloco;
altura: 5px;
cor de fundo: #ddd;
}
Em designs mais complexos, talvez seja necessário projetar o estado da barra de rolagem. Por exemplo, lidar com os diferentes estados do controle deslizante (padrão, pairar, ativo) e o canto de rolagem na visualização de rolagem.
Defina estilos de controle deslizante para diferentes estados para melhorar a experiência do usuário:
::-webkit-scrollbar-thumb:window-inactive {
cor de fundo: #b6b6b6;
}
::-webkit-barra de rolagem-canto {
cor de fundo: #f9f9f9;
}
Melhore a experiência interativa das barras de rolagem:
::-webkit-scrollbar-thumb:ativo {
cor de fundo: #999999;
}
Deve-se observar que o pseudoelemento ::-webkit-scrollbar e os estilos de barra de rolagem relacionados são recursos não padrão. Eles são válidos apenas em navegadores baseados no kernel Webkit, como Chrome, Safari, etc. Portanto, esses estilos personalizados não terão efeito em outros navegadores como Firefox ou IE.
Para personalização do estilo da barra de rolagem em navegadores não Webkit, você pode usar bibliotecas JavaScript, como barra de rolagem perfeita, ou ter controle de estilo limitado definindo o atributo overflow e o comportamento de rolagem do elemento.
Para garantir uma boa experiência em navegadores não suportados:
Se você precisar considerar a compatibilidade entre navegadores, projete a barra de rolagem para garantir que a funcionalidade básica não seja afetada, mesmo que o estilo não seja totalmente consistente. Você também pode explorar o uso de bibliotecas CSS-in-JS ou outras ferramentas JavaScript para implementar estilos complexos de barra de rolagem personalizados.
Resumindo, personalizar barras de rolagem por meio de CSS pode melhorar muito a estética e a experiência do usuário do site. No entanto, considerando problemas de compatibilidade entre navegadores, às vezes há uma compensação entre fazer uma personalização complexa da barra de rolagem ou confiar em soluções de estilo de barra de rolagem prontas para uso fornecidas por estruturas front-end.
1. Como personalizar o estilo da barra de rolagem usando CSS?
As barras de rolagem são um dos elementos comuns nas páginas da web, mas o estilo padrão da barra de rolagem pode não atender necessariamente às suas necessidades de design. Você pode usar CSS para personalizar os estilos da barra de rolagem para combinar com o estilo e a marca da sua página da web.
Primeiro, você precisa selecionar a barra de rolagem usando o seletor de pseudoelemento ::-webkit-scrollbar. Em seguida, você pode usar várias propriedades CSS para ajustar a aparência da barra de rolagem, como largura e altura para definir o tamanho da barra de rolagem, background-color para definir a cor de fundo, border-radius para definir cantos arredondados e assim por diante. sobre.
Além do estilo da barra de rolagem em si, você também pode usar ::-webkit-scrollbar-thumb e ::-webkit-scrollbar-track para definir o estilo do controle deslizante e da trilha da barra de rolagem, respectivamente. Por exemplo, você pode alterar a cor do controle deslizante, a cor de fundo da trilha, etc.
Depois de concluir seus estilos personalizados, você poderá aplicá-los em uma folha de estilo CSS para torná-los eficazes. Lembre-se, como o estilo das barras de rolagem pode variar entre navegadores, é melhor testar e ajustar em navegadores diferentes.
2. Há algum cuidado que precisa ser observado ao personalizar o estilo da barra de rolagem?
Há diversas considerações a serem seguidas ao personalizar estilos de barra de rolagem.
Primeiro, você deve estar ciente de que os estilos da barra de rolagem podem variar entre os navegadores. Portanto, você precisa testar e ajustar em diferentes navegadores para garantir que seus estilos sejam exibidos corretamente em cada navegador.
Em segundo lugar, preste atenção à acessibilidade dos estilos da barra de rolagem. Alguns usuários podem contar com barras de rolagem para navegar no conteúdo da web, portanto, você deve garantir que seus estilos personalizados não interfiram na experiência deles. Certifique-se de que suas barras de rolagem ainda sejam fáceis de identificar e operar.
Finalmente, evite projetar demais. Embora os estilos de barra de rolagem personalizados possam adicionar alguma personalização às suas páginas da web, projetá-los excessivamente pode distrair os usuários do conteúdo. Portanto, mantenha-o com moderação e certifique-se de que o estilo da barra de rolagem seja consistente com o estilo geral do design.
3. Existe alguma outra maneira de personalizar o estilo da barra de rolagem além de usar CSS?
Além de usar CSS para personalizar estilos de barra de rolagem, você também pode considerar o uso de algumas bibliotecas ou plug-ins de terceiros para obter efeitos de barra de rolagem mais complexos.
Por exemplo, você pode usar algumas bibliotecas JavaScript populares, como PerfectScrollbar ou SimpleBar, que fornecem funções de personalização mais avançadas da barra de rolagem, incluindo efeitos de animação da barra de rolagem, eventos personalizados, arrastar o controle deslizante, etc.
Essas bibliotecas de terceiros geralmente oferecem mais opções e flexibilidade para atender às necessidades de estilos de barra de rolagem mais personalizados. É claro que o uso dessas bibliotecas também pode aumentar alguns custos de aprendizado e integração; portanto, ao escolher, você deve decidir se deseja usá-las com base em suas necessidades específicas.
Espero que este tutorial do editor de Downcodes possa ajudá-lo a dominar facilmente o método de personalização de estilos de barra de rolagem com CSS e melhorar seu nível de web design! Lembre-se, em aplicações reais, você deve escolher uma solução apropriada com base em necessidades específicas e realizar testes suficientes para garantir compatibilidade e usabilidade em diferentes navegadores.