Uniapp tersembunyi bar tatal

Dalam pembangunan aplikasi UniApp, bar skrol yang biasa digunakan ialah komponen antara muka yang sangat penting. Walau bagaimanapun, dalam beberapa kes, kami mahu bar skrol tidak kelihatan pada halaman, tetapi kami tidak boleh menyembunyikan bar skrol secara langsung melalui gaya CSS. Jadi, dalam kes ini, bagaimana untuk menyembunyikan bar skrol? Artikel ini akan memperkenalkan anda kepada beberapa kaedah untuk menyembunyikan bar skrol.

1 Gunakan gaya css global untuk menyembunyikan bar skrol

Apabila menggunakan gaya css secara global pada halaman, jika anda ingin menyembunyikan bar skrol, anda boleh menggunakan kod berikut:

::-webkit-scrollbar {
    display:none !important;
}

Semacam ini Kaedah ini dicapai melalui kawalan gaya bar skrol webkit. Apabila gaya ini digunakan secara global, semua bar skrol pada halaman akan disembunyikan.

2. Gunakan gaya CSS sebaris untuk menyembunyikan bar skrol

Apabila membenamkan gaya CSS sebaris dalam halaman, jika anda perlu menyembunyikan bar skrol bagi bekas skrol tertentu, anda boleh menggunakan yang berikut Kod:

#scroll-wrapper::-webkit-scrollbar {
    display:none !important;
}

Antaranya, #scroll-wrapper ialah ID bekas yang perlu menyembunyikan bar skrol.

3. Gunakan JavaScript untuk mengawal penyembunyian bar skrol

Apabila menggunakan JavaScript untuk mengawal penyembunyian bar skrol, anda boleh mengendalikannya melalui kod berikut:

document.documentElement.style.overflow = 'hidden';
document.body.style.overflow = 'hidden';

JS ini kod akan menyembunyikan bar skrol Atribut limpahan ditetapkan kepada tersembunyi untuk menyembunyikan bar skrol.

Ringkasan

Dalam pembangunan aplikasi UniApp, bar skrol ialah salah satu komponen antara muka yang biasa digunakan pada halaman. Walau bagaimanapun, dalam sesetengah halaman, anda tidak mahu bar skrol kelihatan secara langsung Selepas beberapa pemprosesan, anda boleh menyembunyikan bar skrol melalui css atau js. Saya harap kod di atas dapat membantu anda, semua orang dialu-alukan untuk menggunakannya.

Atas ialah kandungan terperinci Uniapp tersembunyi bar tatal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!