Maison > interface Web > tutoriel CSS > le corps du texte

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

Patricia Arquette
Libérer: 2024-11-01 14:30:29
original
331 Les gens l'ont consulté

How to Create Scrollable Divs Without Visible Scrollbars in Other Browsers?

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>
Copier après la connexion
  1. 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>
Copier après la connexion
  1. Définir le débordement : automatique sur le div interne pour permettre le défilement :
<code class="css">#inner-div {
  overflow: auto;
}</code>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal