Bagaimanakah Saya Boleh Memastikan Keterlihatan Bar Tatal pada macOS untuk Pengguna Pad Jejak dalam Penyemak Imbas WebKit/Blink?

Memastikan Keterlihatan Bar Tatal untuk Pengguna Pad Jejak MacOS dalam WebKit/Blink

Dalam penyemak imbas WebKit/Blink seperti Safari dan Chrome, bar tatal pada MacOS telah mengalami tingkah laku pelik sejak OS X Lion (10.7). Apabila menggunakan pad jejak, bar skrol menyembunyikan diri mereka secara automatik sehingga kursor pengguna melayang di atas kawasan boleh ditatal. Walaupun ia kelihatan seperti sentuhan minimalis, gelagat ini boleh menyebabkan kekeliruan, terutamanya apabila bar skrol berfungsi sebagai penunjuk tunggal elemen boleh tatal.

Penyelesaian: Memanfaatkan Elemen Pseudo WebKit

Untuk membetulkan isu ini dan memaksa bar skrol kekal kelihatan, kami boleh memanipulasi penampilannya melalui WebKit -webkit-scrollbar pseudo-elements. Dengan melumpuhkan penampilan dan gelagat lalai dengan -webkit-appearance: tiada, kami boleh mengawal penggayaan bar skrol dan memastikan keterlihatannya:

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

Walau bagaimanapun, memandangkan kami mengatasi gaya lalai, kami juga perlu menentukan sendiri penampilan bar skrol. CSS berikut mencipta semula bar skrol bersembunyi separa lutsinar:

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white;
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
}

Dengan pengubahsuaian ini, bar skrol pada elemen boleh tatal akan kekal kelihatan pada MacOS, tanpa mengira penggunaan pad jejak atau kedudukan kursor, memberikan kejelasan dan kemudahan navigasi untuk pengguna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memastikan Keterlihatan Bar Tatal pada macOS untuk Pengguna Pad Jejak dalam Penyemak Imbas WebKit/Blink?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!