Letakkan barang anda dengan bar scroll tersuai

Pertemuan pertama saya dengan bar skrol yang benar -benar menawan adalah di laman web ini. Pelancaran CSS-Tricks v17, yang menampilkan bar skrol yang sangat berani dan visual, meninggalkan kesan yang berkekalan.

Saya kagum. Bolehkah elemen reka bentuk sedemikian -scrollbar! -Adakah kesannya di laman web profesional? Kecerunan halus, lengkung yang murah hati, latar belakang yang dicampur dengan lancar, dan ketebalan yang memuaskan -ia adalah pilihan reka bentuk yang berani dan inovatif. Rayuan sentuhan scrollbar tidak dapat dinafikan; Ia menjemput interaksi hanya untuk menghargai berat visualnya. Ia berani, avant-garde, dan dapat diakses dengan baik, walaupun dengan anggun merendahkan pada pelayar yang lebih tua.

Walaupun CSS semasa trik scrollbar lebih halus dan bersahaja -kelabu cahaya yang disenyapkan pada hitam -ia masih mengekalkan identiti jenamanya, dengan jelas mempamerkan kesan kecerunan. Walau bagaimanapun, ia kurang mengganggu, memastikan ia tidak mengganggu pengalaman membaca. Dalam dunia yang didorong oleh kecekapan kami, mengutamakan MVP dan peraturan 80/20, scrollbars adat mewakili ketukangan yang benar. Mereka menyampaikan tahap perhatian kepada perincian bahawa kata -kata tidak dapat disampaikan.

Usaha standardisasi (dengan lebih banyak dijalankan) telah mempermudahkan API: tujuh elemen pseudo dan sebelas kelas pseudo mensasarkan hampir setiap aspek dan keadaan bar scroll. Walaupun ini terdengar luas, menguasai hanya tiga cukup untuk penyesuaian yang mengagumkan:

 <code>body::-webkit-scrollbar { /* required - the "base" of the bar - mostly for setting width */ } body::-webkit-scrollbar-track { /* the "track" of the bar - ideal for customizing "background" colors */ } body::-webkit-scrollbar-thumb { /* the draggable element—the star of the show! */ }</code>

Kerja -kerja ini seperti mana -mana elemen terpilih yang lain, yang membolehkan penggunaan teknik CSS yang pelbagai. Pertanyaan media, kecerunan latar belakang, ketelusan, dan margin (menggunakan pelbagai unit CSS) semuanya berfungsi dengan berkesan. (Walau bagaimanapun, tidak semuanya mungkin, saya suka kepada kursor gaya di bar -bar untuk rasa retro yang benar). Bereksperimen dengan kecerunan latar belakang CSS Lea Verou mengakibatkan reka bentuk barber yang agak tidak konvensional, walaupun diperibadikan - tiang barber bergaris untuk ibu jari dan telus untuk trek. Ia tidak dapat dinafikan unik, memperoleh moniker "Swyxbar" di tempat kerja saya selepas saya melaksanakan versi yang lebih halus.

Setiap pemaju front-end harus menolak sempadan penyesuaian scrollbar sekurang-kurangnya sekali. Walau bagaimanapun, adalah penting untuk mengelakkan membuat skrol bar yang menentang jangkaan pengguna, terutamanya dalam produk yang digunakan secara meluas (seperti yang ditunjukkan oleh Google Wave).

Atas ialah kandungan terperinci Letakkan barang anda dengan bar scroll tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!