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.
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
textareayang memuat cukup banyak teks sehingga scrollbar muncul. - Sebuah
iframeyang digunakan untuk menampilkan halaman berbeda. - sebuah
divatau elemen blok lainnya yang memiliki propertioverflow.
Untuk kepentingan demo ini kita akan memilih opsi terakhir. Berikut markup pertama saya:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. In hac habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.
Praesent sodales, sapien sit amet congue egestas, sem ligula ornare massa, vitae suscipit felis ligula quis velit. Phasellus lectus massa, sodales ac vulputate ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, ut consequat nisi posuere id. Cras elit orci, vehicula in sagittis a, faucibus vitae dui. Nunc non lorem in metus adipiscing adipiscing non a sapien. Sed dictum ultrices nibh in tristique. Nulla dapibus laoreet tincidunt. Sed accumsan erat quis mi luctus porta.
Sed mollis justo enim, ut pharetra nunc. Fusce vehicula viverra magna, et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, cursus eget consectetur in, tristique sit amet tortor. Cras eleifend felis sit amet eros vehicula aliquet. Pellentesque fringilla metus in libero luctus eu condimentum nulla pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat sodales lorem, nec dignissim turpis pharetra et. Nullam commodo hendrerit elementum. Donec porta faucibus ligula non blandit. In ultrices vehicula pretium.
Sed ac sagittis sapien. Curabitur varius pellentesque nunc eget molestie. Vivamus in massa arcu, ut auctor tellus. Aliquam convallis lobortis magna, ut posuere odio euismod ac. Vestibulum in enim vitae metus vulputate interdum. Mauris a risus auctor nunc fermentum dapibus. Proin iaculis, nunc ut viverra varius, augue augue porta libero, id viverra nisl elit in mauris. Aenean quis risus ante. Donec bibendum erat a sem vestibulum eu aliquet lectus tincidunt. Vivamus imperdiet congue leo, non ultricies urna sodales sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc in nisi in ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, faucibus placerat tincidunt vitae, vehicula at libero.
Ini hanya sebuah div dengan banyak konten contoh. Dan berikut adalah CSS pertama, yang dimensinya diatur supya tetap dan pemicu scrollbar horizontal dan vertikal:
.container {
width: 400px;
height: 300px;
background-color: #DCDCDC;
overflow: scroll; /* showing scrollbars */
}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.
::-webkit-scrollbar {
width: 15px;
} /* this targets the default scrollbar [compulsory] */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:
::-webkit-scrollbar-track {
background-color: #b46868;
} /* the new scrollbar will have a flat appearance with the set background color */
::-webkit-scrollbar-thumb {
background-color: rgba[0, 0, 0, 0.2];
} /* this will style the thumb, ignoring the track */
::-webkit-scrollbar-button {
background-color: #7c2929;
} /* optionally, you can style the top and the bottom buttons [left and right for horizontal bars] */
::-webkit-scrollbar-corner {
background-color: black;
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */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:
body {
scrollbar-face-color: #b46868;
}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:
$[document].ready[function [] {
if [!$.browser.webkit] {
$['.container'].jScrollPane[];
}
}];
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]
.jspTrack
{
background: #b46868; /* changed from #dde */
position: relative;
}
.jspDrag
{
background: rgba[0,0,0,0.2]; /* changed from #bbd */
position: relative;
top: 0;
left: 0;
cursor: pointer;
}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
- Mengkustomisasi Scrollbar di Webkit oleh Chris Coyler
- Menggayakan Scrollbar di webkit.org
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.
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.
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.
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.
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.