Tutorial CSS Custom Scrollbar: Membuat Scroll Unik dan Modern

Scrollbar (bilah gulir) adalah elemen kecil yang sering diabaikan dalam desain web, padahal keberadaannya dapat memberikan sentuhan estetika dan profesionalitas pada tampilan website. Dengan CSS custom scrollbar, kamu bisa mengubah tampilan scrollbar agar lebih modern, minimalis, atau bahkan sesuai tema situsmu.

Dalam artikel ini, kita akan membahas tutorial CSS custom scrollbar lengkap mulai dari dasar hingga tingkat lanjut — meliputi cara membuat scrollbar unik, memberi efek hover, hingga membuat scrollbar yang mendukung Chrome dan Firefox.

Baca juga: Cara Menggunakan Pseudo-Class dan Pseudo-Element di CSS

Tujuan Tutorial

Setelah membaca artikel ini, kamu akan bisa:

• Memahami cara kerja ::-webkit-scrollbar dan properti terkaitnya.
• Membuat scrollbar kustom dengan warna, bentuk, dan efek hover.
• Mengatur scrollbar agar tampil minimalis dan modern.
• Menambahkan efek smooth scrolling.
• Mengoptimalkan kompatibilitas antar browser.
• Menerapkan dark mode scrollbar CSS.
• Membuat scrollbar horizontal dengan gaya tersendiri.

Apa Itu CSS Custom Scrollbar?

Scrollbar biasanya ditentukan oleh tampilan default browser. Namun dengan CSS modern, kamu bisa menyesuaikan tampilannya menggunakan pseudo-element seperti:

• ::-webkit-scrollbar → Mengatur area scrollbar.
• ::-webkit-scrollbar-thumb → Mengatur batang (thumb) scrollbar.
• ::-webkit-scrollbar-track → Mengatur jalur tempat thumb bergerak.

Contoh sederhananya seperti ini:

/* Custom scrollbar dasar */
::-webkit-scrollbar {
    width: 10px;
}

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

::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}Code language: CSS (css)

Kode di atas akan mengubah tampilan scrollbar pada browser berbasis WebKit seperti Google Chrome dan Safari.

Struktur Dasar Scrollbar di CSS

Sebelum membuat desain yang kompleks, penting memahami struktur komponennya:

Selektor CSS	Deskripsi
::-webkit-scrollbar	Bagian utama scrollbar (track + thumb)
::-webkit-scrollbar-track	Area di mana thumb bergerak
::-webkit-scrollbar-thumb	Bagian yang bisa digeser (handle)
::-webkit-scrollbar-corner	Sudut antara scrollbar horizontal dan vertikal
scrollbar-width	Properti untuk mengatur lebar scrollbar di Firefox
scrollbar-color	Mengatur warna track dan thumb di Firefox

Membuat Scrollbar Minimalis dengan CSS

Scrollbar minimalis cocok untuk desain modern UI. Contohnya seperti ini:

body {
    scrollbar-width: thin;
    scrollbar-color: #555 #f0f0f0;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 8px;
}

::-webkit-scrollbar-track {
    background-color: #f0f0f0;
}Code language: CSS (css)

Hasilnya adalah scrollbar tipis dan halus dengan tampilan bersih, cocok untuk tema web modern.

Scrollbar dengan Warna dan Efek Hover

Untuk membuat scrollbar lebih menarik, tambahkan efek hover dan transisi halus.

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00b4db, #0083b0);
    border-radius: 10px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #0083b0, #00b4db);
}Code language: CSS (css)

Dengan teknik ini, kamu bisa menciptakan scrollbar custom gradient CSS yang menyesuaikan tema situs.

Hasilnya seperti gambar di bawah ini.

Scrollbar untuk Dark Mode

body.dark-mode {
    scrollbar-color: #888 #222;
}

body.dark-mode::-webkit-scrollbar {
    background-color: #222;
}

body.dark-mode::-webkit-scrollbar-thumb {
    background-color: #555;
}Code language: CSS (css)

Scrollbar kini tampil gelap dengan kontras lembut — cocok untuk desain dark mode scrollbar CSS.

Scrollbar dengan Animasi dan Hover Effect

Efek animasi pada scrollbar membuat pengalaman pengguna terasa lebih interaktif. Misalnya:

::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #00bcd4;
    height: 30px;
}Code language: CSS (css)

Ketika pengguna mengarahkan kursor, warna dan ukuran scrollbar berubah secara halus — teknik ini populer dalam CSS scrollbar animation.

Custom Scrollbar Horizontal

Jika elemen kamu menggunakan overflow-x: scroll;, maka kamu juga bisa membuat scrollbar horizontal yang serasi.

.horizontal-scroll {
    overflow-x: scroll;
    white-space: nowrap;
}

.horizontal-scroll::-webkit-scrollbar {
    height: 8px;
}

.horizontal-scroll::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.horizontal-scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}Code language: CSS (css)

Teknik ini cocok untuk menampilkan daftar kartu produk atau galeri horizontal.

Scrollbar Smooth dan Modern

Tambahkan efek scrolling yang lembut untuk pengalaman yang lebih nyaman.

html {
    scroll-behavior: smooth;
}Code language: CSS (css)

Properti scroll-behavior: smooth; membuat perpindahan halaman menjadi lebih elegan — mendukung konsep CSS scrollbar smooth.

Membuat Scrollbar Stylish dengan Gradien dan Shadow

Untuk tampilan yang benar-benar modern:

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #6a11cb, #2575fc);
    border-radius: 12px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}Code language: CSS (css)

Scrollbar tampak seperti elemen 3D dengan gradien berkilau, menciptakan efek profesional.

Kompatibilitas Browser

Browser	Dukungan
Chrome	✅ ::-webkit-scrollbar
Edge	✅ ::-webkit-scrollbar
Safari	✅ ::-webkit-scrollbar
Firefox	✅ scrollbar-color, scrollbar-width
Opera	✅
Internet Explorer	❌ Tidak didukung

Untuk Firefox, gunakan kombinasi:

scrollbar-width: thin;
scrollbar-color: #555 #f0f0f0;Code language: CSS (css)

Tips Styling Scrollbar Terbaik (Best Practice)

1. Gunakan warna yang kontras lembut agar tidak mengganggu konten utama.
2. Hindari scrollbar terlalu tebal — gunakan scrollbar-width: thin;.
3. Tambahkan efek hover ringan, bukan animasi berlebihan.
4. Uji di berbagai browser, terutama Firefox dan Chrome.
5. Pastikan aksesibilitas tetap terjaga (warna cukup kontras).
6. Gunakan variabel CSS agar mudah mengganti tema.

Contoh Lengkap: Scrollbar Modern UI

Berikut contoh layout lengkap dengan scrollbar modern, cocok untuk tema dashboard atau portofolio.

HTML:

<div class="scroll-box">
    <p>Konten panjang di sini...</p>
    <p>Tambahkan lebih banyak teks agar scroll aktif.</p>
</div>Code language: HTML, XML (xml)

CSS:

.scroll-box {
    height: 250px;
    overflow-y: scroll;
    padding: 16px;
    background-color: #f9f9f9;
    border-radius: 12px;
}

/* Custom scrollbar modern */
.scroll-box::-webkit-scrollbar {
    width: 10px;
}

.scroll-box::-webkit-scrollbar-track {
    background: #eee;
    border-radius: 10px;
}

.scroll-box::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #42a5f5, #1e88e5);
    border-radius: 10px;
    transition: background 0.3s ease;
}

.scroll-box::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #1e88e5, #42a5f5);
}

.scroll-box {
    scrollbar-width: thin;
    scrollbar-color: #1e88e5 #eee;
}Code language: CSS (css)

Kesimpulan

Membuat** CSS custom scrollbar** bukan hanya soal estetika, tapi juga tentang meningkatkan pengalaman pengguna. Dengan memanfaatkan pseudo-element seperti ::-webkit-scrollbar dan properti scrollbar-color, kamu bisa membuat scrollbar yang modern, interaktif, dan sesuai identitas desain situs.

Kuncinya adalah keseimbangan: jangan terlalu ramai, tapi juga jangan dibiarkan polos. Scrollbar yang dirancang baik bisa memperkuat citra profesional website kamu.