ugly ass scroll bar van chrome

[Sascha-davidson]

Niet alle browser hebben een mooie scroll bar, chrome is hier een van. Je kan een custom scroll bare stylen door met web-kit de scrollbar te stylen dit heeft voordelen en nadelen, de grootste nadeel is dat het minder toegankelijk is. Ook sloopt het de scroll bar voor mobile en gaat dan altijd zichtbaar zijn op mobile. Dit kan je gelukkig vermijden. Je kan een custom scroll bar op een element, class of id zeten. Meeste mensen doen het op een id omdat ze het maar 1 keer willen gebruiken op een specefieke plek zoals een carousel. Ik zelf ben er meer fan van om het op classes te zeten dit omdat ik het ook vaker wil herbruiken.

Hieronder zie je een voorbeel van een custom scroll bar die ik heb gemaakt en op het moment gebruik. Ik gebruik de @media om te kijken of het op een pointer device is zoals een laptop waar je een muis heb. Als dat het geval is dan verander naar deze styling zo niet dan doet het niets. Dit is een mooie manier om het op mobile niet te hebben en op desktops / pointer devices wel.

Vervolgens gebruik is webkit-... om de scrollbar te stylen. Het moment dat 1 ding gestyled word wordt alle andere styling van de scroll bar afgehaald. Zo je moet dan alles zelf stylen.

Note: er zijn nog twee webkit types om de scrollbar te bewerken deze heb ik niet gebruikt omdat ik het nodig heb.

    @media (pointer: fine) {
        section::-webkit-scrollbar-track {
            margin: 10px 0;
            border-radius: 10px;
        }

        section::-webkit-scrollbar {
            width: 12px;
        }

        section::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background-color: #a7a7a7;
        }
    }

[Jason2426]

Coole suggestie, ik wil de scrollbar eigenlijk vervangen voor een dot indicator voor mobile en desktop want dat is simpel en duidelijk 😄

[krijnhoetmer]

Kijk allebei vooral ook eens naar de scrollbar-width en scrollbar-color properties voor die ugly ass (maar nuttige!) dingen.