Ads by ProfitSence
Close

Como estilizar barras de rolagem com o CSS

Last Updated on Domingo 9º out 2022

Custom Scrollbar CSS

  • Em setembro de 2018, a W3C CSS Scrollbars definiu especificações para a personalização da aparência de barras de rolagem com o CSS.
  • Desde 2020, 96% dos usuários da internet já estão utilizando navegadores que suportam a estilização da barra de rolagem do CSS.
  • No entanto, você precisará escrever dois conjuntos de regras CSS para cobrir o Blink e WebKit, bem como os navegadores Firefox.

CSS Scrollbar Style

  • As barras de rolagem CSS são suportadas pelo Firefox e ::-webkit-scrollbar por Chromium based (Chrome, Edge) e Safari.
  • Todos os navegadores modernos eventualmente passarão para a especificação CSS Scrollbars.
  • Atualmente, as barras de rolagem de estilo para Chrome, Edge e Safari estão disponíveis com o prefixo do fornecedor pseudo-elemento -webkit-scrollbar.

A propriedade scrollbar-color CSS define a cor da faixa e do polegar da barra de rolagem.

Custom Css CodePen

Style ScrollBar

personalizar barra scroll css

			
					/* Firefox */
* {
  scrollbar-width: thick; /* none | auto  */
  scrollbar-color: #ffa07a transparent;
}

/* Firefox */

/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
  width: 14px; /* vertical scrollbar */
  height: 14px; /* horizontal scrollbar */
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: #ffa07a;
  border-radius: 14px;
  border: calc(14px / 4) solid #ccc;
}

*::-webkit-scrollbar-thumb:hover {
  background: #ff7f50;
}
/* Chrome, Edge, Safari */

			
	

css scrollbar

Atualmente, as barras de rolagem de estilo para Chrome, Edge e Safari estão disponíveis com o prefixo do fornecedor pseudo-elemento -webkit-scrollbar.

References