Comment masquer les barres de défilement tout en autorisant le défilement ?

Masquer les barres de défilement tout en conservant la capacité de défilement

Cette question explore la possibilité d'éliminer les barres de défilement sans restreindre la possibilité de faire défiler à l'aide de la souris ou du clavier. Comme indiqué dans une question en double, la désactivation des barres de défilement inhibe également le défilement.

La tentative d'utilisation de la propriété CSS overflow: Hidden a entraîné la désactivation de la barre de défilement et du défilement. Cependant, il existe une solution alternative qui conserve la fonctionnalité de défilement avec des barres de défilement masquées.

Cette approche utilise une division wrapper avec le style overflow:hidden. Pour conserver la même largeur que la zone de texte interne, la largeur de la division wrapper est définie sur la largeur de défilement de la zone de texte moins la largeur de la barre de défilement. Ceci est réalisé avec JavaScript comme suit :

// Determine the textarea width without scrollbar
var textareaWidth = document.getElementById("textarea").scrollWidth;

// Set the wrapper div width to the textarea width
document.getElementById("wrapper").style.width = textareaWidth + "px";

De plus, ce principe peut être étendu pour créer des div défilants sans barres de défilement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!