Puis-je développer une div pour que la barre de défilement overflow-y: auto ne coupe pas le contenu de la div?

Question similaire, sans grande réponse:
Comment puis-je inclure la largeur de “débordement: auto;” barres de défilement dans un div absolu de taille dynamic?

J’ai un

de hauteur fixe qui agit comme un menu de boutons de largeur uniforme. Les utilisateurs peuvent append / supprimer des boutons du menu. Quand il y a plus de boutons que ne peut en tenir verticalement le

, je veux qu’il défile – alors j’utilise overflow-y:auto , qui ajoute en effet une barre de défilement lorsque le contenu est trop volumineux dans y . Malheureusement, lorsque la barre de défilement apparaît, elle chevauche les boutons de menu et ajoute une barre de défilement horizontale. Le gros problème est qu’elle a tout simplement une apparence horrible.

Existe-t-il un “bon” moyen de résoudre ce problème? J’adorerais apprendre quelques astuces de style pour que tout fonctionne correctement (par exemple, la barre de défilement est située à l’extérieur de la division plutôt qu’à l’intérieur, ou la div s’agrandit automatiquement pour accueillir la barre de défilement si nécessaire). Si javascript est nécessaire, c’est très bien – j’utilise déjà jQuery – dans ce cas, quels sont les bons événements pour détecter l’ajout ou la suppression de la barre de défilement, et comment puis-je m’assurer d’utiliser la bonne largeur dans un navigateur croisé / façon cross-style?

JSFiddle: http://jsfiddle.net/vAsdJ/

 HTML:   
 CSS: #menu{ background:grey; height:150px; overflow-y:auto; float:left; } Script: $('#add').button().click(function(){ var d = $(''); var b = $(''); d.appendTo($('#menu')); b.button().appendTo(d); });

Premièrement: Pour supprimer la barre de défilement horizontale, définissez overflow-x: hidden; comme Trent Stewart l’a déjà mentionné dans une autre réponse.

Approche CSS:

Une chose que j’ai faite par le passé est d’append une division enveloppante plus large autour de la division content pour laisser de la place à la barre de défilement. Ceci, cependant, ne fonctionne que si la largeur de votre conteneur est fixe … et peut avoir besoin d’être ajusté (en servant des styles différents) dans différents navigateurs en raison du rendu variable des barres de défilement.

Voici un jsfiddle pour votre cas. Notez le nouveau wrapper

et sa largeur fixe width: 95px; . Dans ce cas, la div wrapper fait le défilement.

Vous pourriez probablement aussi résoudre ce problème en donnant au wrapper un rembourrage à droite, évitant ainsi le problème de la largeur fixe.

Approche jQuery:

Une autre option consiste à détecter le débordement à l’aide de jquery comme décrit ici , puis à augmenter la largeur ou le remplissage de la div pour créer de l’espace. Vous devrez peut-être quand même faire des ajustements spécifiques au navigateur.

Voici un jsfiddle avec une version simplifiée pour votre exemple. Ceci utilise votre fonction click pour vérifier la hauteur de la div après chaque clic, puis ajoute un peu de remplissage pour faire de la place pour la barre de défilement; une comparaison de base entre innerHeight et scrollHeight :

 if($('#menu').innerHeight() < $('#menu')[0].scrollHeight){ $('#menu').css( "padding", "0 15px 0 0" ); }

Pour rendre cela plus convivial pour tous les navigateurs, vous pouvez vérifier la largeur de la barre de défilement (comme indiqué ici ), puis append la valeur renvoyée à la place du remplissage fixe. Voici un autre jsfiddle à démontrer.

Il existe probablement de nombreuses autres méthodes, mais voici comment je procéderais.

Avez-vous essayé simplement d’utiliser overflow-x: visible; ou caché