Empêcher la barre de défilement de s'ajouter à la largeur de la page sur Chrome

Question

J'ai un petit problème en essayant de garder mes pages .html à une largeur cohérente sur Chrome, Par exemple, j'ai une page (1) avec beaucoup de contenu qui dépasse la hauteur du viewport (le bon mot ?), donc il y a une barre de défilement verticale sur cette page (1). Sur la page (2), j'ai la même mise en page (menus, divs,...etc) mais moins de contenu, donc pas de barre de défilement verticale.

Le problème est que sur la page (1), les barres de défilement semblent pousser les éléments légèrement vers la gauche (ce qui augmente la largeur ?) alors que tout semble bien centré sur la page (2).

Je suis encore un débutant en HTML/CSS/JS, et je suis assez convaincu que ce n'est pas si difficile, mais je n'ai pas eu de chance de trouver la solution. Cela fonctionne comme prévu sur IE10 et FireFox (barres de défilement sans interférence), je n'ai rencontré ce problème que sur Chrome.

Answer 1

CLAUSE DE NON-RESPONSABILITÉ : superposition a été déprécié .
Vous pouvez toujours l'utiliser si vous devez absolument le faire, mais essayez de ne pas le faire.

Cela ne fonctionne que sur les navigateurs WebKit mais je l'aime beaucoup. Se comportera comme auto sur d'autres navigateurs.

.yourContent{
   overflow-y: overlay;
}

Ainsi, la barre de défilement n'apparaîtra que comme une superposition et n'affecte donc pas le largeur de votre élément !

Answer 2

Il suffit d'ajouter :

html {
    overflow-y: scroll;
}

Dans votre fichier css, le défilement sera activé, qu'il soit nécessaire ou non, mais vous ne pourrez pas faire défiler les pages.

Cela signifie que la fenêtre d'affichage aura la même largeur dans les deux cas.

Answer 3

Probablement

html {
    width: 100vw;
}

est exactement ce que vous voulez.

Answer 4

La solution 2021 consiste à utiliser scrollbar-gutter qui ajoute l'espace qu'une barre de défilement utiliserait de façon permanente à un élément.

Utilisez

.element-class {
   scrollbar-gutter: stable both-edges;
}

both-edges est facultatif.

Voir aussi https://caniuse.com/mdn-css_properties_scrollbar-gutter y https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter

overflow: overlay est déprécié.

Voici un codepen pour clarifier les différentes possibilités : https://codepen.io/waxolunist/pen/ExweBMz

Answer 5

Vous pouvez obtenir la taille de la barre de défilement, puis appliquer une marge au conteneur.

Quelque chose comme ça :

var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({marginRight:'-'+scrollw+'px'});
    }
}

CSS pour supprimer la h-scrollbar :

body{
    overflow-x:hidden;
}

Essayez de jeter un coup d'oeil à ça : http://jsfiddle.net/NQAzt/