web-dev-qa-db-fra.com

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

Par exemple, j'ai une page (1) avec beaucoup de contenu qui dépasse de la hauteur de la fenêtre de la fenêtre d'affichage (mot juste?) barre de défilement 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.

Le problème est que sur la page (1), les barres de défilement semblent pousser légèrement les éléments à gauche (additionner à la largeur?) Alors que tout semble bien centré sur la page (2)

Je suis toujours 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 la chance de trouver la solution. Cela fonctionne comme prévu sur IE10 et FireFox (barres de défilement non gênantes), je ne l’ai rencontré que sur Chrome.

htmlcssgoogle-chromescrollbar
95
Acemad

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 regarder ceci: http://jsfiddle.net/NQAzt/

31
Lwyrn

Vieux fil mais toujours d'actualité!

Cela ne fonctionne que sur les navigateurs WebKit , mais cela me plait beaucoup .. Se comportera comme auto sur d'autres navigateurs.

.yourContent{
   overflow-y: overlay;
}

Cela fera apparaître la barre de défilement uniquement en tant que superposition , n'affectant donc pas le width de votre élément!

83
simonDos

Tout ce que vous avez à faire est d’ajouter:

html {
    overflow-y: scroll;
}

Dans votre fichier css, vous aurez la possibilité de faire défiler si vous en avez besoin

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

53
Hive7

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

Essayez d'utiliser overflow-y: overlay à la place.

19
Kyle Dumovic

Probablement

html {
    width: 100vw;
}

est ce que vous voulez.

12
TranslucentCloud

J'ai trouvé que je pouvais ajouter

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

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

12
fuzzy_logic_77

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

Mais fondamentalement, ce que vous devez faire, et ce qu’il essayait de faire de manière dynamique, est de définir une largeur de contenu légèrement inférieure à celle du volet parent, défilant.
Ainsi, lorsque la barre de défilement apparaît, elle n’affecte pas le contenu.

Cet EXEMPLE montre un moyen plus astucieux d'atteindre cet objectif, en codant en dur widths au lieu d'essayer de demander au navigateur de le faire pour nous via padding.
Si cela est réalisable, c'est la solution la plus simple si vous ne voulez pas d'une barre de défilement permanente.

2
Hashbrown

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

Utiliser padding-right atténuera l'apparition soudaine d'une barre de défilement

EXEMPLE

chrome devtools showing padding unmoved

Comme vous pouvez le constater à l'aide des points, le texte est placé au même endroit de la page avant le retour à la ligne, qu'il y ait ou non une barre de défilement.
C'est parce que, lorsqu'une barre de défilement est introduite, le remplissage se cache derrière elle, de sorte que la barre de défilement n'appuie pas sur le texte!

1
Hashbrown

Pour les conteneurs de largeur fixe, une solution de navigateur CSS pur peut être obtenue en encapsulant le conteneur dans un autre div et en appliquant la même largeur aux deux div.

#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

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

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

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

0
Piotr Siatkowski

Je ne peux pas ajouter de commentaire pour la première réponse et ça 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') est toujours égal à 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;
}
0
jeremy

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 arrêter cela, j'ai ajouté 

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