Comment empêcher la barre de défilement de repositionner la page Web?

J’ai un site Web avec DIV aligné au centre. Maintenant, certaines pages nécessitent un défilement, d’autres non. Lorsque je passe d’un type à un autre, l’apparence d’une barre de défilement déplace la page de quelques pixels sur le côté. Est-il possible d’éviter cela sans montrer explicitement les barres de défilement sur chaque page?

overflow-y: scroll est correct, mais vous devriez l’utiliser avec la balise html, pas avec le corps, sinon vous obtenez une double barre de défilement dans IE 7
Donc, le css correct serait:

 html { overflow-y: scroll; } 

Je crois que non. Mais coiffer avec overflow: scroll . Vous semblez le savoir, cependant.

J’ai eu le même problème, mais je viens juste d’avoir une bonne idée: enroulez le contenu de votre élément scrollable dans un div et appliquez le padding-left: calc(100vw - 100%); .

  
Some Content that is higher than the user's screen

L’astuce est que 100vw représente 100% de la fenêtre d’affichage, y compris la barre de défilement. Si vous soustrayez 100% , ce qui correspond à l’espace disponible sans la barre de défilement, vous obtenez la largeur de la barre de défilement ou 0 si elle n’est pas présente. Créer un remplissage de cette largeur sur la gauche simulera une seconde barre de défilement, en déplaçant le contenu centré vers la droite.

Veuillez noter que cela ne fonctionnera que si l’élément scrollable utilise toute la largeur de la page, mais cela ne devrait poser aucun problème la plupart du temps car il existe peu d’autres cas où vous avez un contenu défilant centré.

Avec défilement étant toujours affiché, peut-être pas bon pour la mise en page.

Essayez de limiter la largeur du corps avec css3

 body { width: calc(100vw - 34px); } 

vw est la largeur de la fenêtre d’affichage (voir ce lien pour des explications)
calc calculer en css3
34px signifie double largeur de la barre de défilement (voir ceci pour 34px ou pour calculer si vous ne faites pas confiance aux tailles fixes)

Je ne sais pas si c’est un ancien message, mais j’ai eu le même problème et si vous voulez faire défiler verticalement que vous devriez essayer overflow-y:scroll

 html { overflow-x: hidden; margin-right: calc(-1 * (100vw - 100%)); } 

Exemple Cliquez sur le bouton “Modifier la hauteur minimale”.

Avec calc(100vw - 100%) on peut calculer la largeur de la barre de défilement (et si elle n’est pas affichée, elle sera 0). Idée: en utilisant la marge négative, nous pouvons augmenter la largeur de à cette largeur. Vous verrez une barre de défilement horizontale – elle doit être masquée avec overflow-x: hidden .

Si vous modifiez la taille ou que vous chargez des données, la barre de défilement est ajoutée. Vous pouvez ensuite essayer, créer une classe et appliquer cette classe.

 .auto-scroll { overflow-y: overlay; overflow-x: overlay; } 

J’ai résolu le problème sur l’un de mes sites Web en définissant explicitement la largeur du corps en javascript par la taille de la fenêtre moins la largeur de la barre de défilement. J’utilise une fonction basée sur jQuery documentée ici pour déterminer la largeur de la barre de défilement.

  

J’ai essayé de corriger probablement le même problème que celui causé par la classe twitter bootstrap .modal-open appliquée au body . La solution html {overflow-y: scroll} n’aide pas. Une solution possible a été d’append {width: 100%; width: 100vw} {width: 100%; width: 100vw} à l’élément html .

En élargissant la réponse en utilisant ceci:

 body { width: calc(100vw - 17px); } 

Un commentateur a suggéré d’append un remplissage à gauche pour conserver le centrage:

 body { padding-left: 17px; width: calc(100vw - 17px); } 

Mais les choses ne semblent pas correctes si votre contenu est plus large que la fenêtre d’affichage. Pour résoudre ce problème, vous pouvez utiliser des requêtes multimédia, comme ceci:

 @media screen and (min-width: 1058px) { body { padding-left: 17px; width: calc(100vw - 17px); } } 

Où le 1058px = largeur du contenu + 17 * 2

Cela permet à une barre de défilement horizontale de gérer le débordement x et de garder le contenu centré centré lorsque la fenêtre d’affichage est suffisamment large pour contenir votre contenu à largeur fixe.

Les solutions affichées avec calc (100vw – 100%) sont sur la bonne voie, mais cela pose un problème: vous aurez toujours une marge à gauche de la taille de la barre de défilement, même si vous redimensionnez la fenêtre le contenu remplit toute la fenêtre d’affichage.

Si vous tentez de contourner ce problème avec une requête multimédia, vous aurez un moment de cliquetis difficile, car la marge ne diminuera pas progressivement à mesure que vous redimensionnerez la fenêtre.

Voici une solution pour contourner ce problème et AFAIK ne présente aucun inconvénient:

Au lieu d’utiliser margin: auto pour centrer votre contenu, utilisez ceci:

 body { margin-left: calc(50vw - 500px); } 

Remplacez 500px par la moitié de la largeur maximale de votre contenu (donc, dans cet exemple, le contenu max-width est 1000px). Le contenu restra désormais centré et la marge diminuera progressivement jusqu’à ce que le contenu remplisse la fenêtre.

Afin d’empêcher la marge de devenir négative lorsque la fenêtre d’affichage est plus petite que la largeur maximale, ajoutez simplement une requête média comme suit:

 @media screen and (max-width:1000px) { body { margin-left: 0; } } 

Et voilà!

En prolongeant la réponse de Rapti , cela devrait fonctionner tout aussi bien, mais cela ajoute plus de marge sur le côté droit du body et le masque avec une marge html négative, au lieu d’append un remplissage supplémentaire susceptible d’affecter la mise en page. De cette façon, rien n’est modifié sur la page réelle (dans la plupart des cas) et le code est toujours fonctionnel.

 html { margin-right: calc(100% - 100vw); } body { margin-right: calc(100vw - 100%); } 

J’ai l’habitude d’avoir ce problème, mais le moyen le plus simple de le résoudre est le suivant (cela fonctionne pour moi):

sur le type de fichier CSS:

 body{overflow-y:scroll;} 

aussi simple que ça! 🙂

Contrairement à la réponse acceptée qui suggère une barre de défilement permanente dans la fenêtre du navigateur, même si le contenu ne déborde pas , je préférerais utiliser:

 html{ height:101%; } 

Cela est dû au fait que l’apparence de la barre de défilement a plus de sens si le contenu déborde réellement .

Cela fait plus de sens que cela .

J’ai utilisé quelques jquery pour résoudre ce problème

 $('html').css({ 'overflow-y': 'hidden' }); $(document).ready(function(){ $(window).load(function() { $('html').css({ 'overflow-y': '' }); }); }); 
 @media screen and (min-width: 1024px){ body { min-height: 700px } }