Bagaimana untuk Memastikan Bar Skrol Sentiasa Kelihatan dalam Penyemak Imbas Mudah Alih?

Cara Memaparkan Bar Tatal dalam Penyemak Imbas Mudah Alih

Walaupun sifat CSS seperti "overflow:auto" dan "overflow:visible" mendedahkan bar skrol pada pelayar desktop, penyemak imbas mudah alih sering menyembunyikannya sehingga penatalan bermula. Artikel ini membincangkan cara untuk menjadikan bar skrol kelihatan secara konsisten pada peranti mudah alih, walaupun tanpa menggunakan perpustakaan jQuery yang tidak berkesan.

Pertimbangkan kod HTML dan CSS berikut:

<div>

#wrapper {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    width: 500px;
    height: 200px;
}

#frameContent {
    width: 100%;
    height: 100%;
}

Untuk membuat bar skrol sentiasa kelihatan pada peranti mudah alih, tambahkan 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;
}

Kod ini, khusus untuk Enjin penyemak imbas WebKit, mengubah suai penampilan bar skrol, memastikan keterlihatannya pada peranti mudah alih.

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