Obtention d'une zone de défilement à largeur fixe

J'ai besoin d'une div à défilement vertical d'une largeur spécifique. Cependant, régler la largeur à, disons, 200px me donnera en fait (par exemple) 190px d'espace disponible, et 10px de scrollbar, par ex.Obtention d'une zone de défilement à largeur fixe

#area { 
    display: inline-block; 
    width: 200px; 
    overflow: auto; 
} 
... 
<div id="area">(data using max. 200px of width)</div>

Parce qu'il lui manque la largeur de la barre de défilement comme espace réel, je me retrouve avec un minimum, presque inutile (et très laid) barre de défilement horizontale.

Y at-il un moyen d'obtenir la taille de la barre de défilement (en plus de faire la différence avec l'élément suivant, se sent trop hackish) ou de simplement dire "width-without-scrollbar: 200px"? J'utilise jQuery, une solution (plus) dynamique utilisant jQuery est également acceptable (mais je préfère ne pas utiliser les implémentations de la barre de défilement de jQuery, si possible, je veux m'en tenir aux barres de défilement natives).

Aussi, je préfère ne pas dépendre des fonctionnalités CSS3.

Source

2010-12-02 Ivo van der Wijk

Pour répondre à ma propre question (mais toujours à la recherche d'alternatives), calculer la différence en utilisant un "détecteur" de 100% de largeur, puis redimensionner fait l'affaire pour moi. Comme je l'ai dit, en utilisant Javascript pour résoudre ce problème est pas un problème dans mon cas, mais c'est probablement pas comment vous voulez personnaliser votre site :)

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
     <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
     <style type="text/css"> 
     #outer { 
       display: inline-block; 
       width: 200px; 
       height: 100px; 
       overflow: auto; 
     } 
     .detector { 
       width: 100%; 
       height: 0px; 
     } 
     .entry { 
       display: inline-block; 
       width: 200px; 
     } 
     </style> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       var outer = $("#outer"); 
       var detector = $("#outer .detector"); 
       var scrollsize = 200 - detector.width(); 
       outer.width(200 + scrollsize); 
      }); 
     </script> 
</head> 
<body> 
<div id="outer"> 
    <div class="detector"> 
    </div> 
    <div class="entry"> 
    I'm a short entry 
    </div> 
    <div class="entry"> 
    I'm an entry div but I'm very, very, very, very, very, very, very, very, very, very long 
    </div> 
    <div class="entry"> 
    I'm an entry div but I'm very, very, very, very, very, very, very, very, very, very long 
    I'm an entry div but I'm very, very, very, very, very, very, very, very, very, very long 
    </div> 
</div> 
</body> 
</html>

Cela calcule la différence entre l'espace disponible (qui soit 200) et l'espace utilisé par le "détecteur" (qui est, par exemple, 185px). Cela signifie que la taille de la barre de défilement est 15px. Faire #outer 15px plus large nous donnera une zone 200px à l'échelle complète (et supprimer la barre de défilement horizontale)

Source

2010-12-02 12:03:14

Tenir compte de l'utilisation overflow-x: caché

Source

2010-12-31 10:13:30

Je pense que ce ne CSS3. –

Essayez-le quand même. –

Obtention d'une zone de défilement à largeur fixe

Répondre

Questions connexes