4 votes

Placement de la barre de défilement de l'extension Chrome

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 ?

1voto

serg Points 43893

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.

1voto

Eric Points 36290

Vous devez peut-être spécifier une largeur pour la barre de défilement.

::-webkit-scrollbar {
    width: 42px; //Do not know actual width, but I assume you do
}

1voto

Paul Marks Points 26

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.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X