Merida Design Blog

Publicado el | Snippets / ,

Scroll bar personalizado con CSS

Si alguna vez se te ha ocurrido personalizar el scrollbar del navegador en tu página web y no sabes como, resulta que es muy sencillo lograrlo con CSS, el siguiente snippet es un ejemplo de como realizarlo, aunque debo aclarar que solo funciona para navegadores con webkit.

::-webkit-scrollbar{
    width: 5px;
    background: #ddd;
}

::-webkit-scrollbar-thumb {
    background: #444;
    cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(150,150,150,0.8);
    cursor: pointer;
}

Por cierto, éste código es el que uso para personalizar el scrollbar de éste sitio, espero te sirva.



Publicaciones que pueden interesarte

      tope
    Derechos Reservados, Merida Design 2018
    A %d blogueros les gusta esto: