Scrollbar refusant

Développeurs Mac, veuillez noter ce conseil: accédez à Système Préférences> Général> Afficher les barres de défilement et modifiez les paramètres pour toujours afficher . Ce n'est pas pour vous personnellement, mais pour la meilleure présentation de la page Web. Parce que sans ce paramètre, vous ne ressentirez pas le décalage de mise en page déclenché par la barre de défilement, mais il sera rencontré par tous les autres utilisateurs avec ce paramètre activé. Pour éviter de tels problèmes de performances, vous devez utiliser ce paramètre vous-même.

Stefan Judis démontre que l'utilisation des unités de la fenêtre peut être l'une des raisons de ce problème:

100vw dans le code provoque un débordement horizontal car la barre de défilement verticale existe déjà et prend une partie de l'espace. Cela semble très déraisonnable, mais c'est la vérité.

Stefan souligne l'article de Kilian Valkhof sur ce problème. Solution classique:

Le moyen simple consiste à utiliser width: 100% . Le pourcentage ne contient pas la largeur de la barre de défilement, il s'adaptera donc automatiquement.

Si vous ne pouvez pas le faire ou si vous définissez la largeur d'un autre élément, ajoutez overflow-x: hidden ou overflow: hidden sur l'élément environnant pour éviter les barres de défilement.

Kilian Valkhof , «Comment trouver la raison des barres de défilement horizontales»

Je pense que ce sont tous des expédients car aucun d'entre eux ne répond pleinement à vos besoins.

Heureusement, une solution basée sur des spécifications arrive bientôt. Bramus a rapporté ceci:

Un effet secondaire lors de l'affichage des barres de défilement sur une page Web est que la disposition du contenu peut changer en fonction du type de barre de défilement. scrollbar-gutter (publiée bientôt dans Chromium) est conçue pour nous donner plus de contrôle aux développeurs à ce sujet.

Bramus van Damme , «Utilisation d'attribut CSS scrollbar-gutter pour empêcher les décalages de mise en page inattendus causés par des barres de défilement»

Cela ressemble à une solution de contournement, et je ne doute pas que cela deviendra une ligne de code très courante dans les feuilles de style de réinitialisation:

 corps {
  Scrollbar-Gutter: stables deux éditeurs;
}

Cependant, cela me rappelle ... lorsqu'il s'agit de problèmes de barre de défilement au niveau de la page, c'est scrollbar-gutter qui fonctionne, non? Au lieu de overflow ? overflow a été étrange dans le passé lorsqu'il s'agit de faire défiler les aspects liés. Pouvons-nous vraiment l'implémenter dans tous les navigateurs? Qui sait. Cela semble très probable, mais je vais essayer de l'utiliser même s'il est proche et il se comporte conformément à la spécification. Il semble que cela convient à une amélioration progressive.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!