Comment masquer une barre de défilement sans empêcher de scroller ?

Il est possible d'utiliser du CSS pour faire en sorte que l'on puisse faire défiler le contenu de la page avec la souris sans que la barre de scroll s'affiche.

Afficher un contenu plus long que la hauteur ou la largeur maximum d'une page conduit à l'affichage d'une barre de défilement. Cette barre permet de faire défiler le contenu de la page pour le voir dans sa totalité. L'affichage de la barre est automatiquement géré par le navigateur, mais il est possible d'utiliser du CSS pour faire en sorte que l'on puisse faire défiler le contenu de la page avec sa molette sans que la barre de scroll s'affiche.

Une première solution consiste à utiliser 2 containers. Le premier container, le parent, va contenir le deuxième container, l'enfant, qui, lui, va contenir le texte :

<div id=parent>
<div id=enfant>
<!-- Insérer le contenu ici -->
</div>
</div>

Pour ajouter un effet de défilement sans afficher la barre, il faut faire en sorte que la division parent occupe tout l'espace qu'il lui faut et que le contenu qui dépasse soit masqué. Pour cela, on fixe la propriété overflow, qui gère le comportement du contenu qui dépasse d'un élément à la valeur hidden. Pour la division enfant, elle occupe le même espace, mais le contenu est géré avec un défilement (valeur égale à auto). Il suffit ensuite d'ajouter une marge à droite avec la propriété padding-right pour que le contenu se positionne par-dessus la barre de défilement et la masque.

#parent{
 height: 100%;
 width: 100%;
 overflow: hidden;
}
#enfant{
 width: 100%;
 height: 100%;
 overflow: auto;
 padding-right: 15px; /* Il faut varier cette variable en fonction du navigateur utilisé (la barre de défilement n'a pas toujours la même largeur) */
}

La deuxième solution reprend le système des 2 containers, mais utilise la propriété CSS position. Cette propriété permet de positionner un élément sur une page. La division parent va avoir une propriété de position relative et prendre toute la page. Le contenu qui dépasse sera toujours caché. La division enfant aura un positionnement absolu. Un contenu qui dépasse de cette division va provoquer l'affichage d'une barre de défilement. Pour masquer cette barre, on va élargir le contenu de la division enfant sur la droite en fixant une valeur négative à la propriété right, qui indique la position à partir de la droite de la division.

#parent{
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#enfant{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -15px; /* Il faut varier cette variable en fonction du navigateur utilisé (la barre de défilement n'a pas toujours la même largeur) */
overflow: auto;
}