Après avoir joué avec les extensions Chrome, j'ai remarqué que lorsque les données contenues dans la page d'action atteignent un certain point, les barres de défilement s'attachent automatiquement à la fenêtre contextuelle, ce à quoi je m'attends. Cependant, au lieu de pousser le contenu à gauche de la barre de défilement, elle le recouvre, ce qui active une barre de défilement horizontale. J'ai fini par ajouter un contrôle sur mes données et par appliquer une classe css pour pousser le contenu vers la gauche afin qu'il soit parallèle à la barre de défilement, à côté et non en dessous. Quelle est la bonne façon de gérer ce problème, à part ma solution bricolée ?
Réponses
Trop de publicités?Je me suis aussi posé la question. Actuellement, je ne mets rien d'important à moins de 20px du côté droit d'une popup et je désactive les barres de défilement horizontales :
body {overflow-x:hidden;overflow-y:auto;}
Ainsi, lorsqu'une barre de défilement verticale apparaît, le contenu, au moins, ne saute pas.
Je n'ai pas trouvé de moyen de le faire qui ne soit pas un hack, mais voici le hack le plus simple auquel j'ai pensé :
<script type="text/javascript">
function tweakWidthForScrollbar() {
var db = document.body;
var scrollBarWidth = db.scrollHeight > db.clientHeight ?
db.clientWidth - db.offsetWidth : 0;
db.style.paddingRight = scrollBarWidth + "px";
}
</script>
...
<body onresize="tweakWidthForScrollbar()">
L'idée est de détecter si la barre de défilement verticale est utilisée, et si c'est le cas, de calculer sa largeur et de lui allouer juste assez de rembourrage supplémentaire.