Scrollbar personalizada para todos los navegadores

Personalizar las scrollbars es una forma de mejorar la experiencia de usuario en tus proyectos. Aquí tienes un mixin en SCSS para manejar scrollbars tanto en navegadores Webkit como en Firefox, con soporte completo para estilos personalizados.

Mixin SCSS para scrollbars personalizadas

@mixin scrollbar($track: lighten($purple, 50), $handle: $purple, $handleHover: #555) {

  /* Scrollbar para navegadores Webkit */
  &::-webkit-scrollbar {
    width: rem(8px);
  }

  /* Estilo del track */
  &::-webkit-scrollbar-track {
    background: $track;
  }

  /* Estilo del handle */
  &::-webkit-scrollbar-thumb {
    background: $handle;
    border-radius: 5px;
    transition: background 0.3s ease-in-out;
  }

  /* Hover en el handle */
  &::-webkit-scrollbar-thumb:hover {
    background: $handleHover;
  }

  /* Soporte para navegadores no Webkit (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: $handle $track;

  & {
    scrollbar-width: thin;
    scrollbar-color: $handle $track;
  }
}

Cómo usarlo

Este mixin te permite definir colores personalizados para el track, el handle y su estado hover. Asegúrate de incluirlo en el selector correspondiente:

.custom-scrollbar {
  @include scrollbar(#e0e0e0, #6200ea, #3700b3);
}

Consideraciones

El soporte para scrollbars personalizadas puede variar entre navegadores. Webkit cubre la mayoría, pero Firefox utiliza propiedades específicas.
Asegúrate de probar los estilos en todos los navegadores relevantes para garantizar una experiencia consistente.