Bagaimana untuk menyembunyikan bar skrol pada peranti mudah alih atau emulator tanpa menjejaskan tingkah laku menatal dalam aplikasi React?

Question

Pada peranti mudah alih, saya ingin menyembunyikan sepenuhnya bar skrol sepanjang aplikasi, tetapi saya memerlukan pengguna untuk dapat menatal.

Saya cuba menggunakan bar skrol CSS, scrollbar-thumb, scrollbar-thumb:hover dan scrollbar-track untuk menyembunyikan bar skrol, ia berfungsi pada penyemak imbas tetapi tidak pada peranti mudah alih.

Answer 1

Anda perlu menggunakan dua sifat CSS, satu untuk webkit dan satu lagi untuk Mozilla seperti yang ditunjukkan di bawah -

.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

.invisible-scrollbar {
  scrollbar-width: none;
}

di mana .invisible-scrollbar ialah kelas ditambah pada elemen yang berkaitan.