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

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 de la fenêtre (mot correct?), Donc il y a une barre de défilement verticale sur cette page (1). Sur la page (2), j'ai la même disposition (menus, divs, ... etc) mais moins de contenu, donc pas de barres de défilement verticales là-dedans.

Le problème est que sur la page (1) les barres de défilement semblent pousser légèrement les éléments vers la gauche (s'ajoutant à 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 non interférentes), je ne l'ai rencontré que sur Chrome.

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 barre de défilement h:

body{
    overflow-x:hidden;
}

Essayez de jeter un œil à ceci: http://jsfiddle.net/NQAzt/

DISCLAIMER : la superposition est obsolète .
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 autosur les autres navigateurs.

.yourContent{
   overflow-y: overlay;
}

Cela fera apparaître la barre de défilement uniquement comme une superposition , n'affectant donc pas la largeur de votre élément!

Il ne vous reste plus qu'à ajouter:

html {
    overflow-y: scroll;
}

Dans votre fichier css, il y aura le défilement, qu'il soit nécessaire ou non, bien que vous ne puissiez tout simplement pas faire défiler

Cela signifie que la fenêtre aura la même largeur pour les deux

Probablement

html {
    width: 100vw;
}

est exactement ce que vous voulez.

Les navigateurs Webkit comme Safari et Chrome soustraient la largeur de la barre de défilement de la largeur de page visible lors du calcul de la largeur: 100% ou 100vw. Plus d'informations sur le défilement et la largeur de page de DM Rutherford .

Essayez d'utiliser à la overflow-y: overlayplace.

J'ai trouvé que je pourrais ajouter

::-webkit-scrollbar { 
display: none; 
}

directement dans mon css et cela rendrait la barre de défilement invisible, mais me permettrait toujours de faire défiler (sur Chrome au moins). Bon lorsque vous ne voulez pas d'une barre de défilement distrayante sur votre page!

Pour les conteneurs de largeur fixe, une solution de navigateur croisé CSS pure peut être réalisée en enveloppant le conteneur dans un autre div et en appliquant la même largeur aux deux divs.

#outer {
  overflow-y: auto;
  overflow-x: hidden;
  /*
   * width must be an absolute value otherwise the inner divs width must be set via
   * javascript to the computed width of the parent container
   */
  width: 200px;
}

#inner {
  width: inherit;
}

Cliquez ici pour voir un exemple sur Codepen

Il ne semble pas que mon autre réponse fonctionne tout à fait correctement pour le moment (mais je continuerai d'essayer de la rendre opérationnelle).

Mais fondamentalement, ce que vous devrez faire, et ce qu'il essayait de faire de manière dynamique, c'est de définir la largeur du contenu à un peu moins que celle du volet défilable parent.
Ainsi, lorsque la barre de défilement apparaît, elle n'a aucun effet sur le contenu.

Cet EXEMPLE montre une manière plus pirate d'atteindre cet objectif, en codant en dur les widths au lieu d'essayer de faire en sorte que le navigateur le fasse pour nous via padding.
Si cela est possible, c'est la solution la plus simple si vous ne voulez pas d'une barre de défilement permanente.

_{EDIT: cette réponse n'est pas tout à fait correcte pour le moment, reportez-vous à mon autre réponse pour voir ce que j'essayais de faire ici. J'essaie de résoudre le problème, mais si vous pouvez offrir de l'aide, faites-le dans les commentaires, merci!}

L'utilisation padding-rightatténuera l'apparition soudaine d'une barre de défilement

EXEMPLE

Comme vous pouvez le voir à partir des points, le texte arrive au même point de la page avant de s'habiller, indépendamment du fait qu'une barre de défilement soit présente ou non.
En effet, lorsqu'une barre de défilement est introduite, le remplissage se cache derrière elle, donc la barre de défilement ne pousse pas sur le texte!

.modal-dialog {
   position: absolute;
   left: calc(50vw - 300px);
}

où 300 px est la moitié de la largeur de ma fenêtre de dialogue.

C'est en fait la seule chose qui a fonctionné pour moi.

J'ai eu le même problème sur Chrome. Cela ne m'est arrivé que lorsque la barre de défilement est toujours visible. (trouvé dans les paramètres généraux) J'ai un modal et quand j'ouvre le modal j'ai remarqué que ...

body {
    padding-left: 15px;
}

est ajouté au corps. Pour empêcher cela, j'ai ajouté

body {
    padding-left: 0px !important;
}

Je ne peux pas ajouter de commentaire pour la première réponse et cela fait longtemps ... mais cette démo a un problème:

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

b.prop ('scrollHeight') vaut toujours b.height (),

Je pense que ça devrait être comme ça:

if(b.prop('scrollHeight')>window.innerHeight) ...

Enfin je recommande une méthode:

html {
 overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
 width: 100vw;
 overflow: hidden;
}