Bagaimanakah Saya Boleh Menjadikan Bar Skrol Menegak Kelihatan Kekal dalam CSS?

Bertanya Mengenai Keterlihatan Kekal Bar Skrol Menegak dengan Limpahan CSS: Tatal

Apabila melaksanakan limpahan-y CSS: tatal untuk mengekang kandungan dalam lingkungan yang diperuntukkan ketinggian, ia boleh mencabar untuk memastikan pengguna menyedari kehadiran kandungan tambahan. Pada macOS, Chrome dan Safari menyembunyikan bar skrol menegak sehingga pengguna menatal atau melayang secara aktif di atas elemen. Ini menimbulkan kebimbangan sama ada pengguna akan segera menyedari bahawa div mengandungi lebih banyak kandungan.

Penyelesaian untuk Memaksa Paparan Bar Skrol Malar

Penyelesaian kepada isu ini melibatkan menggabungkan CSS berikut:

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

CSS ini mengatasi penggayaan lalai bar skrol pada penyemak imbas macOS. Dengan menetapkan -webkit-appearance kepada tiada, penggayaan lalai penyemak imbas dilumpuhkan. Sifat lebar menentukan lebar yang diingini bagi bar skrol dan sifat jejari sempadan menambah bentuk bulat pada ibu jari skrol. Sifat warna latar belakang dan bayang-bayang kotak memberikan penampilan tersuai, meningkatkan keterlihatan bar skrol.

Dengan menyepadukan CSS ini, bar skrol menegak akan kekal kelihatan walaupun kursor tetikus tidak berlegar di atas div, memastikan pengguna melihat dengan jelas bahawa kandungan tambahan tersedia. Penyelesaian ini menangani cabaran yang ditimbulkan oleh tingkah laku lalai macOS dan memperbaik pengalaman pengguna dengan memberikan petunjuk kekal yang menunjukkan kandungan boleh ditatal.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjadikan Bar Skrol Menegak Kelihatan Kekal dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!