Ditulis oleh: Ditulis pada: 4/22/2019
Apakah Kita Masih Memerlukan Scroll Bar? Scroll bar dapat menjelaskan bahwa sebuah elemen, halaman, atau dokumen masih memiliki kelanjutan baik ke bawah, ke kanan atau ke kiri.
Namun sayangnya, tampilan scroll bar ditentukan oleh OS dan browser yang digunakan pengguna sehingga tampilannya berbeda-beda antara masing-masing OS dan browser.
Dan tentunya juga, keberadaan scroll bar menyita ruang beberapa pixel tergantung OS dan browser yang mendorong konten ke sebelah kiri. Jika Anda menyukai desain simple dan clean, keberadaan scroll bar akan sedikit mengganggu pandangan mata.
Hal itulah yang sekarang saya coba pada blog Kompi Ajaib ini. Demi tampilan yang sederhana dan bersih, saya menghilangkan scroll bar.
Jika Anda menggunakan browser Firefox atau Chrome, maka Anda tidak akan melihat scroll bar pada postingan maupun pada sidebar. Namun keduanya tetap bisa digulirkan.
Menghilangkan scroll bar ini tentu saja masih menjadi pro dan kontra, tetapi saat ini kita tidak melihat scroll bar pada smartphone bukan?
Dengan menghilangkan scroll bar ini, saya mengandalkan rasa penasaran manusia untuk selalu melihat lebih, sehingga meski scroll bar tidak terlihat tetapi pembaca akan menggulirkan halaman ke bawah untuk membaca atau melihat konten.
Bagaimana jika mouse yang digunakan memiliki roda scroll yang tidak berfungsi? Dengan itu mereka memerlukan panah ke atas atau ke bawah pada bilah scroll, bukan?
Jawaban sederhananya untuk berkilah adalah masih adanya tombol ke atas, ke bawah, ke kiri, dan ke kanan pada keyboard.
Lalu bagaimana jika tombol ke atas, ke bawah, ke kiri, dan ke kanan pada keyboard rusak juga?
Jawabannya, beli keyboard atau mouse baru dong mas, hehehe....
Untuk menghilangkan scroll bar ini cukup mudah, hanya memerlukan beberapa baris kode.
1. Menghilangkan scroll bar pada blog.
/* Firefox */
html {
scrollbar-width: none;
}
/* Webkit */
html::-webkit-scrollbar {
display: none;
}Dengan itu, meski halaman tidak menampilkan scroll tapi halaman tetap bisa digulirkan.
Jika Anda tidak benar-benar ingin menghilangkan scroll bar, Anda dapat membuatnya menjadi lebih kecil sehingga tidak terlalu mengganggu tampilan.
/* Firefox */
html {
scrollbar-width: thin;
}
/* Webkit */
html::-webkit-scrollbar {
width: 9px;
height: 9px;
}
2. Menghilangkan scroll bar pada elemen.
/* Firefox */
.element {
scrollbar-width: none;
}
/* Webkit */
.element::-webkit-scrollbar {
display: none;
}Dengan itu, meski elemen tidak menampilkan scroll tapi tetap bisa digulirkan.
Jika Anda tidak benar-benar ingin menghilangkan scroll bar, Anda dapat membuatnya menjadi lebih kecil sehingga tidak terlalu mengganggu tampilan.
/* Firefox */
.element {
scrollbar-width: thin;
}
/* Webkit */
.element::-webkit-scrollbar {
width: 9px;
height: 9px;
}Namun CSS ini tidak bekerja pada browser IE maupun Edge.
Mungkinkah di masa depan scroll bar akan benar-benar dihilangkan?