Mobile Usability – Custom Scrollbars

On mobile devices, Usability is everything.
Because of this, standard elements are often designed broader and larger.

Example of a 30px wide and 100px thumb custom scrollbar:

/*A custom scrollbar is configurable. 
Here, it is broader than the standard.
This way, it is easier to use on touchscreen 
or other small or mobile devices.*/

/* width */
::-webkit-scrollbar {
    width: 30px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    height: 100px!important;
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/*end custom scrollbar*/

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.