Comment masquer les barres de défilement tout en autorisant le défilement de la souris et du clavier ?

Masquer les barres de défilement tout en maintenant le défilement de la souris/clavier

Cette question a été marquée comme doublon, mais le fil de discussion d'origine n'a pas répondu correctement au problème. problème spécifique du masquage de la barre de défilement tout en permettant le défilement avec la souris ou le clavier.

Original Question :

Puis-je masquer la barre de défilement tout en autorisant le défilement avec la souris ou le clavier ?

Débordement CSS : limitation cachée :

La propriété CSS overflow: Hidden peut être utilisée pour masquer la barre de défilement, mais elle désactive également la fonctionnalité de défilement au total.

Solution jQuery (original) :

Le fil de discussion d'origine proposait une solution jQuery qui mesure dynamiquement la largeur de la zone de texte sans la barre de défilement et définit la largeur du div wrapper en conséquence. Cela crée l'illusion d'un div déroulant sans barre de défilement visible.

// get the width of the textarea minus scrollbar
var textareaWidth = document.getElementById("textarea").scrollWidth;

// width of our wrapper equals width of the inner part of the textarea
document.getElementById("wrapper").style.width = textareaWidth + "px";

Solution JavaScript (sans jQuery) :

Alternativement, le même principe peut être appliqué sans jQuery :

document.getElementById("wrapper").style.overflow = "hidden";

// get the width of the textarea minus scrollbar
var textareaWidth = document.getElementById("textarea").scrollWidth;

// width of our wrapper equals width of the inner part of the textarea
document.getElementById("wrapper").style.width = textareaWidth + "px";

Mise à jour :

Le même principe peut être utilisé pour créer des div défilants sans barres de défilement en utilisant CSS et JavaScript.

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!