Bagaimana untuk Menjadikan Bar Skrol Kelihatan Kekal pada Penyemak Imbas Mudah Alih?

Mendayakan Keterlihatan Bar Tatal Berterusan pada Penyemak Imbas Mudah Alih

Apabila membentangkan tapak web dengan kandungan boleh tatal, pembangun sering menghadapi isu bar skrol tersembunyi pada peranti mudah alih. Walaupun bar skrol mudah dilihat pada penyemak imbas desktop, ia cenderung disembunyikan pada penyemak imbas mudah alih sehingga penatalan dimulakan. Ini boleh membawa kepada cabaran kebolehgunaan.

Satu pendekatan untuk menangani isu ini ialah menggunakan penggayaan tersuai dengan CSS. Dengan menggunakan peraturan CSS tertentu, adalah mungkin untuk menjadikan bar skrol kelihatan secara konsisten pada penyemak imbas mudah alih.

Pertimbangkan kod CSS berikut:

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

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}

Dengan menambahkan kod CSS ini pada helaian gaya anda, anda boleh :

• Lumpuhkan gaya bar skrol penyemak imbas lalai (-webkit-appearance: tiada;)
• Tentukan dimensi tersuai untuk bar skrol menegak dan mendatar (lebar dan tinggi)
• Sesuaikan penampilan ibu jari bar skrol (warna latar belakang, jejari sempadan dan jidar)
• Nyatakan gaya trek bar skrol (jejari sempadan dan background-color)

Menggunakan kod CSS ini akan menjadikan bar skrol sentiasa kelihatan pada peranti mudah alih, memberikan pengalaman pengguna yang lebih intuitif.

Atas ialah kandungan terperinci Bagaimana untuk Menjadikan Bar Skrol Kelihatan Kekal pada Penyemak Imbas Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!