MISE À JOUR:
Firefox prend désormais en charge le masquage des barres de défilement avec CSS, de sorte que tous les principaux navigateurs sont désormais couverts (Chrome, Firefox, Internet Explorer, Safari, etc.).
Appliquez simplement le CSS suivant à l'élément dont vous souhaitez supprimer les barres de défilement:
.container {
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0;
}
C'est la solution de navigateur croisé la moins hacky que je connaisse actuellement. Découvrez la démo.
RÉPONSE ORIGINALE:
Voici une autre façon qui n'a pas encore été mentionnée. C'est vraiment simple et n'implique que deux divs et CSS. Aucun JavaScript ou CSS propriétaire n'est nécessaire, et cela fonctionne dans tous les navigateurs. Il ne nécessite pas non plus de définir explicitement la largeur du conteneur, ce qui le rend fluide.
Cette méthode utilise une marge négative pour déplacer la barre de défilement hors du parent, puis la même quantité de remplissage pour ramener le contenu à sa position d'origine. La technique fonctionne pour le défilement vertical, horizontal et bidirectionnel.
Démos:
Exemple de code pour la version verticale:
HTML:
<div class="parent">
<div class="child">
Your content.
</div>
</div>
CSS:
.parent {
width: 400px;
height: 200px;
border: 1px solid #AAA;
overflow: hidden;
}
.child {
height: 100%;
margin-right: -50px; /* Maximum width of scrollbar */
padding-right: 50px; /* Maximum width of scrollbar */
overflow-y: scroll;
}
!important
donc je les ai tous supprimés