Bagaimanakah Saya Boleh Menghalang Bar Tatal daripada Hilang pada Pad Jejak macOS dalam Penyemak Imbas WebKit/Blink?

Mencegah Kehilangan Bar Tatal untuk Pengguna Pad Jejak dalam WebKit/Blink

Tingkah laku lalai penyemak imbas WebKit/Blink macOS (Safari/Chrome) telah lama menyembunyikan bar skrol daripada pengguna secara automatik berinteraksi dengan pad jejak pada versi di atas 10.7 (Mac OS X Lion). Tingkah laku ini boleh menjadi masalah terutamanya kerana ia mengalih keluar isyarat visual biasa yang menunjukkan kebolehscrollan sesuatu elemen.

Pernyataan Masalah

Kesukaran timbul dalam memastikan bar skrol kelihatan secara konsisten untuk elemen boleh tatal dalam pelayar berasaskan WebKit pada macOS.

Penyelesaian

WebKit menyediakan sistem pseudo-elemen yang berkuasa, membolehkan manipulasi meluas bar skrol melalui penggunaan -webkit-scrollbar pseudo-elemen. Untuk mengekalkan bar skrol yang boleh dilihat pada setiap masa:

1. Lumpuhkan Rupa Lalai: Gunakan sifat -webkit-appearance dan tetapkannya kepada tiada untuk mengatasi gelagat penyembunyian automatik.
2. Penggayaan Tersuai: Tentukan pilihan penggayaan khusus untuk bar tatal secara manual, kerana mengalih keluar penampilan lalai boleh membawa kepada bar tatal yang tidak kelihatan. Pertimbangkan untuk menentukan sifat berikut:

• -webkit-scrollbar-track: Warna latar belakang dan jejari sempadan
• -webkit-scrollbar- ibu jari: Sempadan, warna latar belakang, jidar jejari
• -webkit-scrollbar-width dan -webkit-scrollbar-height: Dimensi masing-masing untuk bar skrol mendatar dan menegak

Contoh

CSS berikut menunjukkan cara mencipta semula bar skrol yang hilang penampilan:

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

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

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

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

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

Demonstrasi Visual

Nota Tambahan

• Penyelesaian ini khusus untuk penyemak imbas berasaskan WebKit pada macOS.
• The CSS yang disediakan menjadi contoh dan boleh disesuaikan untuk dipadankan dengan penampilan yang diingini.

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