Mengubah Tipe Kursor pada Scrollbar

Tabel Konten
  1. HTML 
  2. CSS 
  3. Demo 
Mengubah Tipe Pointer Scrollbar
Kursor pada scrollbar berubah menjadi pointer.

Mungkin ini tidak penting tapi terkadang kita merasa bahwa menggeser-geser scrollbar dengan kursor bertipe pointer akan terasa lebih “enak” dibandingkan dengan menggeser-geser scrollbar dengan kursor bertipe default. Akan tetapi mengubah tipe kursor pada scrollbar tidak mungkin bisa dilakukan karena scrollbar tidak termasuk ke dalam elemen HTML (pengecualian jika kita menggunakan manipulasi seperti JavaScript Custom Scrollbar, karena setiap item penggulung dibuat menggunakan elemen HTML). Bahkan selektor CSS scrollbar milik WebKit pun tidak bisa dimanipulasi:

::-webkit-scrollbar-thumb {
  cursor:pointer; /* tidak bekerja! :( */
}

Satu cara sederhana yang bisa kita lakukan untuk mengubah tipe kursor pada scrollbar adalah dengan menerapkan tipe kursor menjadi pointer secara keseluruhan kepada area yang diinginkan, kemudian mengembalikan tipe kursor ke keadaan semula pada bagian dalam. Di sini kita membutuhkan elemen pembungkus ekstra:

HTML 

<div class="scrollable-area">
  <div class="scrollable-area-content">
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
</div>

CSS 

.scrollable-area {cursor:pointer}
.scrollable-area-content {cursor:auto}

Demo 

Lihat Demo

Contoh lain, mengubah tipe kursor menjadi n-resize pada scrollbar vertikal dengan tampilan kustom (buka halaman demo menggunakan peramban Google Chrome atau Safari):

Lihat Demo

17 Komentar

  • Unknown

    pertamax gan

  • Beben Koben

    webkit only ya bos :p

  • Unknown

    Kalau dirubah ke pointer gini, apakah ada pengaruh atau perbedaan fungsi atau kenyamanan ketika di PC menggunakan mouse ,dengan kalau digulung di gadget touch sreen mas ??

  • Farrij Annafi'u

    bang mau tanya, biar kotak komentar bisa kayak punya abang gimana caranya???

  • ws

    di windows 8 gak work :p

  • Edudetik

    udah coba ne hasilnya : www.indodetik.com :D

  • Anonim

    gak cross browser :(

    • Taufik Nurrohman

      Yup. Ternyata betul. Padahal Saya pikir logikanya sangat masuk akal jadi Saya tidak sempat mengeceknya ke semua peramban, tapi ternyata gagal. Untuk sementara bekerja dengan baik di Google Chrome dan Safari. Opera bisa menampilkan kursor berupa pointer jari, tapi bagian pembungkus dalam tidak berhasil kembali berubah menjadi ke keadaan normal. Internet Explorer gagal menampilkan kursor jari tapi bagian pembungkus dalam malah menampilkan kursor jari. Firefox ternyata juga tidak bisa.

      Paling tidak posting ini bisa memberikan sedikit ide/pemicu kepada yang lain untuk mencari tahu solusinya (yang kalau bisa hanya menggunakan CSS).

      • you

        mudah-mudahan nanti muncul postingan bkin scroll pake tinyscrollbar.. hehe ngarep...

  • Anonim

    Waduuh Ane Ketinggalan..
    Ijin Coba Ya Mas...

  • Anonim

    kalau scroll pada halaman biasa bisa gak yaa?

  • Unknown

    maaf naruh link mas, coba lihat -> http://yoga-tc.blogspot.com/p/upload-gambar-blog-krizeer.html supaya gambarnya tersusun rapi, dan tidak berantakan gimana ya ?, saya ingin mengkoleksi beberapa gambar yg saya butuhkan untuk disimpan di halaman tersebut.

    • Taufik Nurrohman

      Kamu salah tempat. Pertanyaan baru tidak harus selalu diletakkan pada posting terbaru. Dan sebisa mungkin pertanyaan yang dibuat adalah pertanyaan yang tidak terlalu speifik pada masalah perseorangan saja ⇒ /2013/01/bagaimana-cara-bertanya-yang-baik-di.html

      • Unknown

        yang pertama karena pada posing terbaru akan cepat ke cek/dilihat oleh admin blog, saya mohon maaf kalo saya salah tempat untuk berkomentar karena saat ini saya lagi sibuk UAS, jadi gk sempet baca artikel yang panjang2, kecuali gambar, hehe

  • Noval Bintang

    wew, ternyata bisa diubah juga yaa

  • Anonim

    selain kursor default bisa pake cursor custom gk gan?

Komentar telah ditutup.