Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Kiat Kilat: Mengatur Gaya Scrollbar Agar Cocok dengan Desain UI Anda

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Hasannudin Amin (you can also view the original English article)

Kiat ini akan membimbing Anda dalam meningkatkan tampilan serta rasa dari scrollbar agar cocok dengan desain UI milik Anda. Kita akan melihat apa yang peramban WebKit tawarkan ke kita dalam hal CSS, ditambah kita akan menggunakan jQuery fallback untuk memenuhi peramban lainnya.

Ingin Melihat Ringkasnya ?

Jika Anda membutuhkan bantuan dengan penggayaan komponen tertentu dari situs web milik Anda, ini akan mempercepat untuk mendapatkan bantuan profesional. Envato siap memiliki para ahli untuk membantu mengatur ulang gaya dan mengkostumisasi semua komponen web.

Web component services on Envato Studio

Catatan Singkat Tentang Peramban

Ketika kita mengacu pada peramban berbasis Webkit, pada dasarnya yang kita bicarakan adalah Apple Safari dan Google Chrome. Keduanya saat ini memegang lebih dari 40% untuk semua pasar peramban desktop. Untuk tablet, Apple's iPad akan selalu menggunakan Webkit tidak peduli apa yang peramban perusahaan gunakan. Google juga menambahkan Chrome di Android OS dan Chromebooks yang tentu saja berbasis Google Chrome.

Melihat kenyataan seperti itu, ini akan menjadi masa depan yang cerah untuk penggayaan scrollbar.


Langkah 1: Halaman Sederhana Dengan Scrollbar

Sebelum kita dapat memual ke topik sesungguhnya tentang penggayaan scrollbar dengan CSS, kita butuh demo fungsional; sebuah halaman dengan scrollbar. Scrollbar akan terlihat jika:

  • Konten lebih besar dari area jendela yang tampak (scrollbar akan muncul di sebelah kanan).
  • Sebuah textarea yang memuat cukup banyak teks sehingga scrollbar muncul.
  • Sebuah iframe yang digunakan untuk menampilkan halaman berbeda.
  • sebuah div atau elemen blok lainnya yang memiliki properti overflow.

Untuk kepentingan demo ini kita akan memilih opsi terakhir. Berikut markup pertama saya:

Ini hanya sebuah div dengan banyak konten contoh. Dan berikut adalah CSS pertama, yang dimensinya diatur supya tetap dan pemicu scrollbar horizontal dan vertikal:

Anda akan dapat melihat sesuatu yang semisal dengan ini:


Langkah 2: Memulai Dengan Peramban Webkit

Beberapa waktu lalu (beberapa tahun) Elemen pseudo CSS memperkenalkan di peramban Webkit untuk menarget scrollbar, memberikan kesempatan untuk penggayaan halaman Anda sesuai tema Anda.

Mari kita menggayakan sesuatu, gunakan prefiks -webkit- dan properti untuk penyesuaian scrollbar. Ingat bahwa saya hanya menggunakan properti CSS dasar untuk memudahkan dalam memahaminya, dan dengan komentar berupa penjabaran.

Ketika elemen pseudo ini tampil, Webkit akan menonaktifkan penayangaan scrollbar bawaannya dan hanya menggunakan informasi yang diberikan oleh CSS. - Surfin' Safari

Dan ini beberepa elemen pseudo yang lainnya:

Setelah menambahkan CSS ini, Anda akan dapat melihat efeknnya (sekali lagi, hanya di peramban Webkit)

Terus bagaimana? Internet Explorer memiliki penggayaan Scrollbar sendiri!

Itu benar - faktanya IE adalah peramban pertama yang pernah mendukung penggayaaan scrollbar pada CSS. Ini kembali di saat IE 5.5, namun hanya warnanya saja yang akan berubah.

Properti ini dapat di gunakan hingga hari ini; mari kita lihat satu properti berikut di IE 9 untuk tujuan demonstrasi:

Lihat bagaimana hasilnya:


Langkah 3: Fallback untuk Peramban Non-Webkit

Cukup dengan Webkit. Firefox, IE dan Opera juga dapat bergabung untuk bersenang-bersenang. Untuk mereka kami memiliki fallback yang bagus yaitu jScrollPane. Plugin jQuery ini dikembangkan oleh Kelvin Luck dan ini akan menyelamatkan kita untuk hari ini.

Di situs milik Kelvin terdapat banyak sekali contoh bagus, tapi untuk penggunaan sederhana, hal yang kita perlu lakukan adalah mengunduh jQuery dan berkas jScrollPane serta mengimplementasikan mereka seperti berikut:

Untuk tujuan menyamakan tema kita, mari buka jquery.jscrollpane.css dan sunting baris dengan isian warna seperti berikut (untuk meningkatkan performa Anda mungkin ingin menempatkan lokasi semua gaya bersamaan berkas milik Anda)

Ini screenshot dari apa yang akan Anda lihat di Firefox:


Kesimpulan

Aplikasi Web semisal Gmail dan Google+ (dan banyak contoh lainnya) telah siap dengan ide dan jika momentum ini berlanjut, mungkin Firefox dan IE akan juga menyediakan solusi dari mereka.

Saya harap Anda suka dari Kiat Kilat ini dan Saya ingin melihat apa yang Anda hasilkan dalam desain scrollbar di waktu kedepan!


Sumberdaya Lebih Lanjut

Scrollbar yang mudah dikustom di Envato Market

Jika Anda ingin melihat solusi siap jadi, Envato Market menyediakan scrollbar yang telah diseleksi yang bisa Anda gunakan di website Anda dengan beberapa efek. Berikut sebagian dari mereka:

1. Lazybars - Themeable responsive scrollbar jQuery plugin

Lazybars sangat mudah digunakan, plugin jQuery dengan scrollbar yang themeable. Anda dapat mengimplementasikan scrollbar ini hanya dengan menambahkan nama kelas dari elemen scrollbar di situs website milik Anda.

Terdapat tema yang siap digunakan dipaketkan dengan Lazybars, atau Anda dapat membuat tema sendiri dengan CSS sederhana.

Lazybars - Themeable responsive scrollbar jQuery plugin
Lazybars - Themeable responsive scrollbar jQuery plugin

2. Fancy Scrollbar - WordPress

“Fancy Scrollbar – WordPress” adalah plugin yang dapat dibuat untuk mengkustom scrollbar di situs Wordpress. Dia memiliki banyak sekali opsi dalam kustomisasi. Anda dapat mengkustom warna, efek, delay scroll, rail strip, dan banyak parameter lainnya.

Fancy Scrollbar - WordPress
Fancy Scrollbar - WordPress

3. Awesome Custom Scrollbar

Awesome Custom Scrollbar adlah plugin kustom scrollbar jQuery yang sangat customizable untuk situs WordPress milik Anda. Dengan plugin ini Anda dapat mengkustom scrollbar dari halaman web Anda, dan Anda dapat menyematkan Scrollbar Kustom lewat kode singkat dimanapun Anda menginginkannya, bahkan dalam berkas tema.

Awesome Custom Scrollbar
Awesome Custom Scrollbar

4. DZS Scroller

DZS Scroller menyediakan scrollbar untuk situs Anda yang dapat di kustomisasi dengan sangat mudah lewat CSS jika tiga skin yang diikutsertakan dirasa tidak cukup. Ini juga dilengkapi dengan fungsi yang disempurnakan seperti scroll by hover atau fade on mouse leave. Dan ini bekerja di iPhone/iPad.

DZS Scroller
DZS Scroller

5. CSS3 Scrollbar Styles

Ini sangat mudah digunakan serta indah dan penuh warna untuk CSS3 Scrollbar untuk situs web Anda. Sederhananya tinggal sisipkan di berkas CSS yang ada dan nikmati CSS3 Scrollbar yang baru.

CSS3 Scrollbar Styles
CSS3 Scrollbar Styles
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.