Barras de rolagem personalizadas Mixin - CSS-Tricks

As barras de rolagem são um daqueles componentes da IU que estão presentes em quase todas as páginas da Internet, mas nós (desenvolvedores) temos pouco ou nenhum controle sobre isso. Alguns navegadores nos permitem personalizar sua aparência, mas para a maioria dos navegadores, incluindo o Firefox, isso simplesmente não é possível.

Houve algumas atualizações e padronização nas barras de rolagem de estilo. Veja o estado atual das barras de rolagem de estilo para ver as últimas, que você pode portar para um mixin.

Ainda assim, o Chrome e o Internet Explorer (sim) possibilitam definir estilos personalizados para as barras de rolagem. No entanto, a sintaxe é terrivelmente complexa e, claro, definitivamente não é padrão. Bem-vindo ao mundo proprietário. É por isso que você pode querer um pouco de mixin para personalizar facilmente suas barras de rolagem. Direita?

@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) ( // For Google Chrome &::-webkit-scrollbar ( width: $size; height: $size; ) &::-webkit-scrollbar-thumb ( background: $foreground-color; ) &::-webkit-scrollbar-track ( background: $background-color; ) // For Internet Explorer & ( scrollbar-face-color: $foreground-color; scrollbar-track-color: $background-color; ) )

Uso:

body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )

Exemplo

Veja o mixin Pen Sass para o estilo da barra de rolagem de Hugo Giraudel (@HugoGiraudel) no CodePen.

Indo além

Em ambos os navegadores, existem muito mais opções do que apenas cor e tamanho. No entanto, eles são frequentemente esquecidos, então não acho que vale a pena sobrecarregar o mixin com essas opções. Sinta-se à vontade para criar um mixin mais avançado com opções extras.

Leituras adicionais: