Comment créer des divisions défilantes sans barres de défilement visibles dans d'autres navigateurs ?

Création de Divs défilants sans barres de défilement visibles dans d'autres navigateurs

En plus de la solution Webkit fournie, vous pouvez obtenir le même effet dans d'autres navigateurs en utilisant une technique CSS intelligente. Voici comment :

Solution CSS :

1. Enveloppez votre div défilant dans un autre div :

<code class="html"><div id="outer-div">
  <div id="inner-div" style="overflow: auto;">
    <!-- Your scrollable content goes here -->
  </div>
</div></code>

2. Définir le débordement : caché sur le div externe pour masquer sa barre de défilement :

<code class="css">#outer-div {
  overflow: hidden;
}</code>

3. Définir le débordement : automatique sur le div interne pour permettre le défilement :

<code class="css">#inner-div {
  overflow: auto;
}</code>

Comment ça marche :

En enveloppant le div défilant dans le div externe avec overflow: caché, vous « emprisonnez » essentiellement la barre de défilement dans le div externe, la rendant invisible. Le div interne gère le défilement réel tout en étant contraint par les limitations du div externe.

Exemple :

Découvrez cet exemple sur https://jsfiddle.net/qqPcb / pour une démonstration fonctionnelle.

Remarque :

Cette technique est également utilisée par le plugin jQuery populaire, jScrollPane, qui fournit une solution plus complète pour masquer les 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!