Comment masquer les barres de défilement sur les appareils mobiles ou les émulateurs sans affecter le comportement de défilement dans l'application React ?

Question

Sur les appareils mobiles, j'aimerais masquer complètement les barres de défilement dans toute l'application, mais j'ai besoin que l'utilisateur puisse faire défiler.

J'ai essayé d'utiliser la barre de défilement CSS, la barre de défilement-thumb, la barre de défilement-thumb:hover et la barre de défilement-track pour masquer la barre de défilement, cela fonctionne sur le navigateur mais pas sur les appareils mobiles.

Answer 1

Vous devez utiliser deux propriétés CSS, une pour le webkit et une autre pour Mozilla, comme indiqué ci-dessous -

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

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

où .invisible-scrollbar est la classe ajoutée à l'élément concerné.