Custom Scrollbar CSS

Custom Scrollbar CSS



FSodic.ID - Halo mblo, gimana tethering masih lancar? Tau diri ya kalo tethering punya temen :wkwk:

Oke hari ini saya mau ngebahas sedikit tentang custom scrollbar. Mengapa scrollbar dicustom? ya pasti biar nyambung sama tema blognya lah :gagah:



Sebelum masuk ke inti artikelnya, saya jelaskan sedikit bahwa custom scrollbar yang akan kita gunakan merupakan pseudo-element dari css yang hanya berjalan di browser yang menggunakan teknologi webkit. Dan untuk browser mozilla baik di ponsel ataupun desktop-nya scrollbar ini tidak akan berjalan.



Oke tanpa banyak basa-basi lagi, kita langsung lihat saja gambarnya berikut:



Keterangan:

1. Scrollbar ::-webkit-scrollbar

2. Scrollbar Button ::-webkit-scrollbar-button

3. Scrollbar Thumb ::-webkit-scrollbar-thumb

4. Scrollbar Track ::-webkit-scrollbar-track

5. Scrollbar Track Pieces ::-webkit-scrollbar-pieces

6. Scrollbar Corner ::-webkit-scrollbar-corner

7. Resizer ::-webkit-resizer



Contoh simple CSS:



body {

height: 1000px;

width: 200%;

}

::-webkit-scrollbar {

width: 15px;

height: 15px;

background: #ddd;

}

::-webkit-scrollbar-thumb {

background: #e17;

border-radius: 7.5px;

}


Nah ini demonya:



Nah untuk mengatur scrollbar horizontal dan vertical kalian tinggal menambahkan pseudo-class :horizontal atau :vertical. Seperti ini

::-webkit-scrollbar-thumb:horizontal atau ::-webkit-scrollbar-thumb:vertical.



Untuk contoh situs yang menggunakan Custom Scrollbar ini:

fsodic.id

css-tricks.com

youtube.com (Bagian play from playlist)



Oke cukup sekain dari saya mblo, selamat beraktifitas kembali :gagah:

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Fakelink dengan JQuery

Gambar
FSodic.ID  - Halo para jomblo yang kalo malam minggu pura-pura tidur, gimana masih suka tethering dari hp temen atau masih tetap sama wifi tetangga yang tiap minggu ganti-ganti password? :wkwk: Oke pada kesempatan kali ini, saya akan membagikan tutorial , how to , pie carane  membuat link palsu. Tapi inget,  bukan link berita palsu, berita hoax atau berita-berita adu domba yang sering dipercaya emak-emak jaman now ya :gagah:. Nah sebelumnya saya akan jelaskan sedikit maksud dari link palsu disini. Link palsu disini maksudnya adalah ketika kalian mengunjungi sebuah situs, lalu terdapat link yang atribut href -nya https://www.fsodic.id namun ketika kalian klik ternyata linknya mengarah ke situs lain. Metode ini emang cocok banget buat nyangkul dollar ketika dipasang di link download untuk situs-situs download, situs-situs referral, atau sejenis lainnya yang bisa diarahkan ke safelink kalian atau apapun. Kenapa saya bilang cocok, karena tidak sedikit yang menyorot...
Baca selengkapnya

Change Event Select di Javascript

Gambar
FSodic.ID  - Halo para jomblo, gimana kabar kalian? Wifi aman? Atau lagi terisolir? Tenang, make VPN bisa kok buat buka isolirnya :wkwk: Oke dikesempatan kali ini, saya akan membagikan tutorial Event Onchange dengan Pure Javascript dan JQuery. Jadi gak main-main tutorialnya langsung 2 bentuk :gagah: Mengingat ada salah satu tema di WapBlog.ID yang tidak menggunakan Internal atau External Javascript, Posting ini mungkin bisa untuk menambah materi posting yang ntah berapa tahun tidak ada tambahan :wkwk: Mengintip menu tema tersebut, saya mendapatkan element seperti ini: <select class="mudon" name="url" onchange="window.open(this.options[this.selectedIndex].value,'_top')"> <option>Menu</option> <option value="https://official.wapblog.id">Home</option> <option value="https://official.wapblog.id/about.xhtml">About</option> </select> Kita analisa terlebih dahulu, terdapat attribut on...
Baca selengkapnya

Membuat Animasi Loading dengan JQuery

Gambar
FSodic.ID  - Halo para jomblo, gimana kabar kalian? Wifi tetangga aman? atau lagi terisolir belum dibayar :wkwk: oke sambil nunggu tetangga ke Indomaret buat bayar wifinya, mending ikuti tutorial di fsodic.id. Tenang, tutorial di fsodic.id gak akan ngebahas tentang PHP, Linux, Ubuntu atau Android melainkan hanya tutorial-tutorial tentang blog khususnya blog di WapBlog.ID  dan mungkin bisa diaplikasikan ke situs atau blogmu diluar WapBlog.ID. Pada kesempatan ini, saya akan ngebahas salah satu permintaan user yang meminta Tutorial Membuat animasi loading pada blog. Berhubung sedang buntu buat ngepost setelah semalam buat ngejar versi Baru WapBlog.ID bagian Akun Set, mau main PUBG juga too soon mulu :wkwk: dan saya juga lagi cari-cari bahan postingan, ya okelah. Oke, sebelum kita mulai alangkah baiknya kalian siapkan dulu alat-alat pendukung berikut: - Secangkir kopi hitam - Sebungkus rokok L* Bold - Putar lagu yang membara - Dan setoples cemilan Apabila sudah siap, yu...
Baca selengkapnya