Heute habe ich für dich ein paar Tricks, wie du eine echt coole Scrollbar auf deine Webseite bekommst.
Die Farben kannst du natürlich individuell anpassen, wie es dir am besten gefällt.

Die Erstellung einer Custom Scrollbar ist sehr leicht und du benötigst nur CSS dazu.
Also öffne deine Style Datei und lass uns direkt loslegen.

Du benötigst für eine Scrollbar 3 Dinge.

::-webkit-scrollbar-track{}
::-webkit-scrollbar{}
::-webkit-scrollbar-thumb{}

Das war es eigentlich auch schon. Dort kannst du nun die Breiten, Farben und vieles weitere angeben.
Ich habe dir die oberen Demos einmal komplett sortiert aufgelistet.

Style 1

::-webkit-scrollbar-track
 {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     border-radius: 10px;
     background-color: #F5F5F5;
 }
::-webkit-scrollbar
 {
     width: 12px;
     background-color: #F5F5F5;
 }
::-webkit-scrollbar-thumb
 {
     border-radius: 10px;
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
     background-color: #555;
 }

Style 2

::-webkit-scrollbar-track
 {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     border-radius: 10px;
     background-color: #F5F5F5;
 }
::-webkit-scrollbar
 {
     width: 12px;
     background-color: #F5F5F5;
 }
::-webkit-scrollbar-thumb
 {
     border-radius: 10px;
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
     background-color: #D62929;
 }

Style 3

::-webkit-scrollbar-track
 {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     background-color: #F5F5F5;
 }
::-webkit-scrollbar
{
     width: 6px;
     background-color: #F5F5F5;
 }
::-webkit-scrollbar-thumb
 {
     background-color: #000000;
 }

Style 4

::-webkit-scrollbar-track
 {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     background-color: #F5F5F5;
 }
::-webkit-scrollbar
 {
     width: 10px;
     background-color: #F5F5F5;
 }
::-webkit-scrollbar-thumb
 {
     background-color: #000000;
     border: 2px solid #555555;
 }

Style 5

::-webkit-scrollbar-track
 {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     background-color: #F5F5F5;
 }
::-webkit-scrollbar
 {
     width: 10px;
     background-color: #F5F5F5;
 }
::-webkit-scrollbar-thumb
 {
     background-color: #0ae;
 background-image: -webkit-gradient(linear, 0 0, 0 100%,                    color-stop(.5, rgba(255, 255, 255, .2)),                    color-stop(.5, transparent), to(transparent));
 }

Style 6

::-webkit-scrollbar-track
 {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     background-color: #F5F5F5;
 }
::-webkit-scrollbar
 {
     width: 10px;
     background-color: #F5F5F5;
 }
::-webkit-scrollbar-thumb
 {
     background-color: #F90; 
     background-image: -webkit-linear-gradient(45deg,
                                               rgba(255, 255, 255, .2) 25%,
                                               transparent 25%,
                                               transparent 50%,
                                               rgba(255, 255, 255, .2) 50%,
                                               rgba(255, 255, 255, .2) 75%,
                                               transparent 75%,
                                               transparent)
 }

Style 7

::-webkit-scrollbar-track
 {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     background-color: #F5F5F5;
     border-radius: 10px;
 }
::-webkit-scrollbar
 {
     width: 10px;
     background-color: #F5F5F5;
 }
::-webkit-scrollbar-thumb
 {
     border-radius: 10px;
     background-image: -webkit-gradient(linear,
                                        left bottom,
                                        left top,
                                        color-stop(0.44, rgb(122,153,217)),
                                        color-stop(0.72, rgb(73,125,189)),
                                        color-stop(0.86, rgb(28,58,148)));
 }

Style 8

::-webkit-scrollbar-track
 {
     border: 1px solid black;
     background-color: #F5F5F5;
 }
::-webkit-scrollbar
 {
     width: 10px;
     background-color: #F5F5F5;
 }
::-webkit-scrollbar-thumb
 {
     background-color: #000000;  
 }

Style 9

::-webkit-scrollbar-track
 {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     background-color: #F5F5F5;
 }
::-webkit-scrollbar
 {
     width: 10px;
     background-color: #F5F5F5;
 }
::-webkit-scrollbar-thumb
 {
     background-color: #F90; 
     background-image: -webkit-linear-gradient(90deg,
                                               rgba(255, 255, 255, .2) 25%,
                                               transparent 25%,
                                               transparent 50%,
                                               rgba(255, 255, 255, .2) 50%,
                                               rgba(255, 255, 255, .2) 75%,
                                               transparent 75%,
                                               transparent)
 }

Style 10

::-webkit-scrollbar-track
 {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     background-color: #F5F5F5;
     border-radius: 10px;
 }
::-webkit-scrollbar
 {
     width: 10px;
     background-color: #F5F5F5;
 }
::-webkit-scrollbar-thumb
 {
     background-color: #AAA;
     border-radius: 10px;
     background-image: -webkit-linear-gradient(90deg,
                                               rgba(0, 0, 0, .2) 25%,
                                               transparent 25%,
                                               transparent 50%,
                                               rgba(0, 0, 0, .2) 50%,
                                               rgba(0, 0, 0, .2) 75%,
                                               transparent 75%,
                                               transparent)
 }

Style 11

::-webkit-scrollbar-track
 {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     background-color: #F5F5F5;
     border-radius: 10px;
 }
::-webkit-scrollbar
 {
     width: 10px;
     background-color: #F5F5F5;
 }
::-webkit-scrollbar-thumb
 {
     background-color: #3366FF;
     border-radius: 10px;
     background-image: -webkit-linear-gradient(0deg,
                                               rgba(255, 255, 255, 0.5) 25%,
                                               transparent 25%,
                                               transparent 50%,
                                               rgba(255, 255, 255, 0.5) 50%,
                                               rgba(255, 255, 255, 0.5) 75%,
                                               transparent 75%,
                                               transparent)
 }

Style 12

::-webkit-scrollbar-track
 {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
     border-radius: 10px;
     background-color: #444444;
 }
::-webkit-scrollbar
 {
     width: 12px;
     background-color: #F5F5F5;
 }
::-webkit-scrollbar-thumb
 {
     border-radius: 10px;
     background-color: #D62929;
     background-image: -webkit-linear-gradient(90deg,
                                               transparent,
                                               rgba(0, 0, 0, 0.4) 50%,
                                               transparent,
                                               transparent)
 }

Style 13

::-webkit-scrollbar-track
 {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
     border-radius: 10px;
     background-color: #CCCCCC;
 }
::-webkit-scrollbar
 {
     width: 12px;
     background-color: #F5F5F5;
 }
::-webkit-scrollbar-thumb
 {
     border-radius: 10px;
     background-color: #D62929;
     background-image: -webkit-linear-gradient(90deg,
                                               transparent,
                                               rgba(0, 0, 0, 0.4) 50%,
                                               transparent,
                                               transparent)
 }

Style 14

::-webkit-scrollbar-track
 {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
     background-color: #CCCCCC;
 }
::-webkit-scrollbar
 {
     width: 10px;
     background-color: #F5F5F5;
 }
::-webkit-scrollbar-thumb
 {
     background-color: #FFF;
     background-image: -webkit-linear-gradient(90deg,
                                               rgba(0, 0, 0, 1) 0%,
                                               rgba(0, 0, 0, 1) 25%,
                                               transparent 100%,
                                               rgba(0, 0, 0, 1) 75%,
                                               transparent)
 }

Style 15

::-webkit-scrollbar-track
 {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
     background-color: #F5F5F5;
     border-radius: 10px;
 }
::-webkit-scrollbar
 {
     width: 10px;
     background-color: #F5F5F5;
 }
::-webkit-scrollbar-thumb
 {
     border-radius: 10px;
     background-color: #FFF;
     background-image: -webkit-gradient(linear,
                                        40% 0%,
                                        75% 84%,
                                        from(#4D9C41),
                                        to(#19911D),
                                        color-stop(.6,#54DE5D))
 }

Dir hat der Beitrag gefallen oder du hast Fragen? Nutze ganz einfach die Kommentar Funktion.
Wir Danken dir für deine Unterstützung in Form einer Krypto Spende.

  • Bitcoin
  • Ethereum
  • Dogecoin
Scan to Donate Bitcoin to 1A1z2vkkmD31Q8YXZrje25vh6MqHiPX3HG

Donate Bitcoin to this address

Scan the QR code or copy the address below into your wallet to send some Bitcoin

Tag / Hinweis: - Bitcoin Wallet
Scan to Donate Ethereum to 0xb18a82066e3b85a8a06baacf9b5436dad60528c0

Donate Ethereum to this address

Scan the QR code or copy the address below into your wallet to send some Ethereum

Tag / Hinweis: - Ethereum ERC20 Wallet
Scan to Donate Dogecoin to DMzxdiJABdvePuLyiGVKVMSwoYzFujxRzK

Donate Dogecoin to this address

Scan the QR code or copy the address below into your wallet to send some Dogecoin

Tag / Hinweis: - Dogecoin Wallet