Mengubah Tipe Kursor Pada Scrollbar - Dewa Blogger

Halaman

    Social Items

Buy Now
/ / / Mengubah Tipe Kursor Pada Scrollbar
Mungkin ini tidak penting tapi terkadang kita merasa bahwa menggeser Mengubah Tipe Kursor pada Scrollbar
Kursor pada scrollbar bermetamorfosis 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 mustahil dapat dilakukan sebab scrollbar tidak termasuk ke dalam elemen HTML (pengecualian kalau kita memakai manipulasi menyerupai JavaScript Custom Scrollbar, sebab setiap item penggulung dibentuk memakai elemen HTML). Bahkan selektor CSS scrollbar milik WebKit pun tidak dapat dimanipulasi:

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

Satu cara sederhana yang dapat kita lakukan untuk mengubah tipe kursor pada scrollbar yaitu dengan menerapkan tipe kursor menjadi pointer secara keseluruhan kepada area yang diinginkan, lalu mengembalikan tipe kursor ke keadaan semula pada cuilan 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 memakai peramban Google Chrome atau Safari):

Lihat Demo


Sumber https://www.dte.web.id/

Mengubah Tipe Kursor Pada Scrollbar

Mungkin ini tidak penting tapi terkadang kita merasa bahwa menggeser Mengubah Tipe Kursor pada Scrollbar
Kursor pada scrollbar bermetamorfosis 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 mustahil dapat dilakukan sebab scrollbar tidak termasuk ke dalam elemen HTML (pengecualian kalau kita memakai manipulasi menyerupai JavaScript Custom Scrollbar, sebab setiap item penggulung dibentuk memakai elemen HTML). Bahkan selektor CSS scrollbar milik WebKit pun tidak dapat dimanipulasi:

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

Satu cara sederhana yang dapat kita lakukan untuk mengubah tipe kursor pada scrollbar yaitu dengan menerapkan tipe kursor menjadi pointer secara keseluruhan kepada area yang diinginkan, lalu mengembalikan tipe kursor ke keadaan semula pada cuilan 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 memakai peramban Google Chrome atau Safari):

Lihat Demo


Sumber https://www.dte.web.id/
CSS Eksperimen
Langganan: Posting Komentar (Atom)