j'ai: J'ai plusieurs pages Web avec ce contour: avec le CSS: Problème: Toutes les pages sont courtes de sorte qu'aucune barre de défilement ne s'affiche, mais une page est plus longue, donc une barre de défilement verticale à droite apparaît. Cette deuxième page provoque déplacement du conteneur (vers la gauche) juste un peu. de ce que je comprends une solution commune consiste à faire apparaître la barre de défilement sur toutes les pages, mais je veux vraiment éviter cela puisque ce n'est qu'une page sur beaucoup. Question: Y a-t-il un moyen d'éviter de déplacer le conteneur tout en l'ayant toujours centré sans faire de la barre de défilement toutes les pages ?
4 Réponses :
Je ne connais pas la solution CSS pure, mais vous pouvez utiliser JavaScript pour compter et régler de manière dynamique la largeur de la marge gauche (tout en faisant la marge droite un peu plus mince - par taille de la barre de défilement).
BTW: imo: la bonne façon de traiter cela est: Laissez-le tel quel. parce qu'il est un comportement par défaut et je ne pense pas que les utilisateurs sont inquiets à ce sujet autant que vous êtes. Ceci est mon avis et quelqu'un pourrait avoir un autre, mais Ajout de la barre de défilement à chaque page (pour résoudre ceci) est l'échec épique . :)
@ Dampe: Merci pour la réponse. Je n'aime pas non plus l'idée d'ajouter la barre de défilement à toutes les pages. Et vous avez probablement raison que personne ne remarquera sauf moi. J'ai essayé d'avoir mon site être très simple et élégant. Avez-vous un exemple de comment utiliser JavaScript pour «compter de manière dynamique»?
Je suis d'accord. Les utilisateurs ne font pas la page aux comparaisons de page de votre site. Certes non navigateur pour les comparaisons de navigateur.
@THOMAS M: Je n'ai pas d'exemple de code .. Mais vous pouvez rechercher ici ou Google. Il s'agit essentiellement d'obtenir des dimensions de la fenêtre du navigateur. Ensuite, faites des mathématiques (margins = BrowserWindowWidth - Taille du contenu), quelques mathématiques (gaune = margins / 2) et (droitemargin = margins / 2 - WidthofscrollBar). Etc ... il a besoin de tester et de modifier et c'est-à-dire que vous ferez probablement envie de vous déchirer la tête: D
De plus, comme Sparky672 mentionné: chaque barre de défilement aura une taille différente. Aussi les différentes peaux et barres d'outils ... tout cela rend la solution dynamique perte de temps pour cela :)
Euh et j'ai oublié .. vous n'avez pas à vous soucier de la marge droite. Vous avez essentiellement besoin de solution différente. Vous devez compter la largeur de la marge gauche (ce qu'elle devrait être sans barre de défilement). Ensuite, faites une vérification pour savoir si ScrollBar est apparu (= Votre contenu est long) - vous pouvez éviter cela lorsque vous savez exactement à quelle page cela se produit. Ensuite, il vous suffit de définir la marge sur cette valeur "devrait". Mais cela ne fonctionne que dans un scénario spécifique, lorsque la fenêtre est statique. Vous devrez également traiter de la fenêtre de redimensionnement. Lorsque j'échappe ma fenêtre. Les marges changent (la marge: celles-automnes). Heureux gaspillage ..: p
@Thomas, comme Humphed dit, vous devrez déclencher le JavaScript une fois qu'une fenêtre est redimensionnée. Compte tenu des scénarios presque infinis, cela va être une perte de temps épique ou une défaillance épique. Chaque fois que je commence à prélever quelque chose comme ça, je cherche d'autres avant de réinventer la roue. Si vous ne trouvez pas de plugin JQuery qui prend en charge cela, il ne peut probablement pas être fait efficacement. Bonne chance. ;)
@Thomas m, voir Modifier # 4 dans ma réponse originale ci-dessus. C'est une solution simple, une ligne et pure CSS, mais je ne l'ai pas testée dans tous les navigateurs. Peut-être que vous pouvez l'essayer et nous revenir à nous. :)
EPIC échoue? N ° de réglage Overflow-Y pour faire défiler est une solution commune et simple à ce problème, qui ne nécessite aucun piraime JavaScript inélégant pour obtenir ce qui est fondamentalement une tentative de passage du comportement de navigateur normal, défaut, attendu.
@bigmattyh: Comme je l'ai dit: c'est Epic Fail dans mon oppinion . La barre de défilement n'est pas une décoration et je ne veux pas le voir quand je n'ai pas besoin.
@bigmattyh, peut-être que vous avez mal compris ce qui a été écrit. Personne n'a dit que c'est une défaillance épique de résoudre le problème rapidement et facilement. J'ai dit que cela finirait par être un échec épique d'essayer de résoudre celui-ci avec JavaScript et que SHOPEED indique que ce serait une défaillance épique de forcer une barre de défilement sur chaque page qui l'ait besoin ou non.
En regardant la solution CSS plus proche ... Il crée des barres de défilement vides ou grisées pour les pages qui n'ont pas besoin de faire défiler. Je resterais avec le comportement du navigateur par défaut.
@ Dampe, normalement, il est bon sens de la conception de respecter le comportement du navigateur par défaut, mais le changement de contenu est un cas où le comportement par défaut peut réellement nuire à l'expérience utilisateur. Plutôt que de laisser le comportement par défaut tel quel ou de piratage ensemble une approche JS basée sur JS, il est parfaitement acceptable de rendre une barre de défilement inactive par défaut. Cela fonctionne toujours sur toutes les plates-formes et toutes les tailles d'écran et est triviale à mettre en œuvre. De toute évidence, il y a des compromis à toutes les décisions de conception, mais ce n'est pas de 1999 et vous ne trouverez pas beaucoup de personnes qui font valoir que les utilisateurs ne comprennent pas la façon dont les barres de défilement fonctionnent.
Vous pouvez également, avec PHP, ajouter une valeur de rembourrage à gauche lorsque vous êtes sur la page longue, mais la barre de défilement sera différente de différentes largeurs dans différents navigateurs / plates-formes, donc JavaScript serait la seule solution de pixel-parfaite. < / p>
Merci pour les réponses. Je voudrais essayer de voir si je pouvais faire cette solution "pixel-parfaite". Alors, comment puis-je commencer? Avez-vous des exemples que je pourrais commencer?
@Thomas, pour les solutions de pixels parfaits, vous devez être prêt à prendre en compte JavaScript (ou n'importe laquelle de ses bibliothèques dérivées »). Si vous êtes Visualisez à considérer JavaScript, veuillez envisager d'ajouter la balise «JavaScript» et, si possible, le nom d'une bibliothèque que vous seriez heureux de travailler (le cas échéant).
Les solutions basées sur le serveur (comme utiliser PHP) ne résoudront pas ce problème, car il s'agit de ce qui se passe sur le rendu dans le navigateur.
@bigmattyh. Je suis d'accord, sauf si je me soucie que de FF, je sais que la barre de défilement FF est de 16px de large, puis j'utilise php pour générer mon CSS, vérifier si je suis sur la page incriminée et ajouter 16px de remplissage de remplissage. (Juste pour être clair, je ne le ferais jamais, je ne le faisais jamais, juste dire que cela pourrait être fait. Je suis d'accord avec d'autres personnes qui ont dit ne pas gâcher avec le comportement par défaut.)
Les personnes avec de grands moniteurs ne verront jamais une barre de défilement sur une page.
Les personnes avec de petits moniteurs verront toujours des barres de défilement sur toutes les pages.
Malgré la taille du moniteur, les gens sont libres de faire n'importe quelle fenêtre de navigateur toutes tailles et de causer des barres de défilement.
Oh et n'oublions pas les personnes qui aiment ajouter une douzaine de bandes d'outils d'outils de navigateur font la zone de contenu de la fenêtre du navigateur la moitié aussi élevée que possible.
C'est à quoi il s'agit et aucune solution statique ne va se contenter de cela. Changer la marge sur une page n'est pas une solution pour des raisons énumérées ci-dessus.
Si vous insistez sur la réparation de quelque chose que les gens ont appris à vivre avec, il devra être une solution JavaScript "dynamique" où vous calculez votre marge gauche et ajoutez la largeur de la barre de défilement. Pour différents navigateurs, les barres sont différentes largeurs, vous devrez également calculer cela aussi.
EDIT2: En tant qu'utilisateur HOMMED dans les commentaires, vous devrez également déclencher le JavaScript après chaque fois que la fenêtre est redimensionnée par l'utilisateur. Cela va être une perte épique de votre temps. Typiquement, le comportement par défaut du navigateur est laissé au navigateur. Beaucoup trop de variables pour rendre compte et vous devez manquer quelque chose si vous n'avez pas tous les scénarios, la peau, le système d'exploitation, la version du navigateur, la marque de navigateur, l'addition de la barre d'outils, le type de surveillance, la taille, etc. . Une fois que vous avez commencé à obtenir ce travail, vous trouverez que vous devez effectuer des exceptions et des corrections pour l'explorateur. Avant de le savoir, vous vous retrouvez avec un morceau de bloat massif ... et pour quoi? Quelle est la valeur de cela? Point de départ: Comportement attendu garanti à 100% à 100% dans tous les navigateurs et situations. Point de fin: > Garantie superbe sur votre moniteur / système uniquement ... Vous prenez un risque qu'il ressemblerait à une indemnité sur un système / scénario que vous n'avez même pas pensé. Recherchez une solution JavaScript pré-fabriquée ou un plug-in jquy d'abord ... Si vous ne pouvez pas en trouver un, demandez-vous pourquoi? Edit3: J'ai fait des recherches pour satisfaire ma curiosité. J'ai trouvé un fil avec une solution de jQuery ainsi que des liens vers des méthodes de calcul de la largeur de la barre de défilement. IMHO, c'est une perte de temps et de ressources, mais voici le lien pour toute personne intéressée ... http://expressionengine.com/archived_forums/viewththread/158703/ < / a> Edit4: Voici une solution CSS que j'ai trouvée. Je n'ai pas testé cela, mais si cela fonctionne, ce serait doux. http://haslayout.net/csss-tuts/fixing-page-shift-problem
@ Sparky672: Merci pour l'entrée. Je vais essayer de jouer avec ça.
@ Sparky672: Merci d'avoir examiné cela. J'ai essayé le débordement-y: une partie de défilement, mais comme vous écrivez, je reçois une barre de défilement sur chaque page. J'ai trouvé une solution qui fonctionne pour moi pour l'instant. J'ai défini HTML {Overflow-Y: caché}, mais ensuite mettre le contenu trop long dans un autre
Une dernière chose: je suppose que je pourrais être capable de simplement "redessiner" la barre de défilement afin qu'il tombe dans le reste de la conception du site Web ...
@THOMAS: J'ai passé des heures sur ce problème dans le passé et je n'ai toujours jamais vu de solution qui fonctionne de manière cohérente sur les plates-formes et les tailles de navigateur pour atteindre exactement ce que vous voulez. Je suis venu croire que la meilleure solution consiste à définir Overflow-y pour faire défiler. Si le changement de contenu est suffisant d'un problème que vous devez résoudre, je pense que vous constaterez que les avantages de rendre la barre de défilement dépassent de loin l'inconvénération esthétique mineure. C'est une solution aussi simple, vous pouvez la définir et être fait avec elle en 10 secondes et passer à des choses plus importantes dans votre projet.
@THOMAS: Après beaucoup de googles et certains expérimentations de CSS, je dois être d'accord avec BigMattyh ... Si vous voulez éviter le poste de travail, ajoutez une ligne de CSS et vivez avec une barre de défilement de fantôme sur toutes les pages courtes (j'ai lu ceci Est-ce comment IE 6 & 7 (non 8) semble le faire par défaut) ... sinon vivre avec le changement de vitesse. Il n'y a pas de jQuery ou autre type de solution JavaScript que je pouvais trouver.
J'ai également pensé que peut-être qu'il y avait un moyen de créer une zone morte (rembourrage négatif et / ou marges ainsi que d'autres astuces CSS) sur le bord droit avec une wrapper div afin qu'un changement de 50 pixels de largeur n'aurait aucun effet sur la teneur intérieure. .. échouer. Peu importe ce que la barre de défilement change efficacement la largeur de la page et le contenu se comporte en conséquence ... comme si cela a été dit au début ... Comportement par défaut.
@Thomas: J'espérais secrètement qu'il y avait une solution CSS facile, car mon problème est un peu plus un problème que le vôtre. J'ai une page très courte où le contenu glisse des barres ouvertes et des barres de défilement apparaissent soudainement. Mon évacuation soudain n'est pas une page par page mais se produit juste avant vos yeux car le contenu animé provoque une barre de défilement. Personnellement, je déteste les barres de défilement des fantômes persistants, donc j'accepte simplement le comportement par défaut tel quel.
Si vous voulez une option PURE CSS, je pense qu'un Absolute positionné DIV à l'intérieur du corps avec une largeur et une hauteur de 100%, un remplissage automatique de débordement et un remplissage droit supérieur à la largeur d'une barre de défilement, remplacera la barre de défilement normale sans changer la contenu à gauche sur les pages longues.
Je sais que j'ai utilisé cette technique il y a longtemps, mais je ne me souviens pas des bizarreries exactes du CSS que je devais utiliser.
Dupliquer possible de Comment arrêter mon contenu Web du changement de vitesse à gauche lorsque la barre de défilement verticale apparaît? Roll-up des conseils 2017