Le pseudo bug de la barre de scroll

29/01/2006 En français

Ce billet date de plusieurs années, ses informations peuvent être devenues obsolètes.

Quand on se retrouve avec un site web centré et pas assez de contenu pour faire apparaître la barre de défilement vertical, tout va bien. Mais si on navigue un peu et que le contenu devient plus conséquent, notre barre de scroll va faire son apparition et ça provoque un léger décalage horizontal du contenu. Si vous avez du mal a voir de quoi je parle essayez de passer de la home de mon site à la page du weblog. Cela se produit dans la plupart des navigateurs alternatifs tels que Safari, Firefox ou Opera. C'est parfois délicat d'expliquer à un client qu'il n'y a pas de solution à ce phénomène.

Je ne dirai pas ça tous les jours mais pour une fois je préfère presque le comportement d'IE Win qui affiche quand même la barre de scroll inactive lorsqu'il n'y a pas besoin de faire défiler la page verticalement. Esthétiquement c'est plus beau sans barre, mais ce petit décalage, quand il se produit, donne au néophyte l'impression d'un bug dans la conception. Je ne sais pas quelle pourrait être la solution idéale à ce phénomène, c'est plus difficile à résoudre qu'on ne le pense, un bon casse tête pour les concepteurs de navigateurs.

#1 olivier

29/01/2006 22:15

Salut,

C'est effectivement compliqué d'expliquer que ce comportement du naviguateur est normal...

Il y a cependant un moyen de contrer ce "bug" à l'arrache en donnant à l'élément body une hauteur de 100.1% dans la feuille de style CSS ;)

a+

#2 Marco

29/01/2006 22:52

@olivier : Ah ouais je connaissais pas cette astuce. Je testerai ça bientôt. Tu connais des sites qui parlent de ça ?

#3 NiKo

29/01/2006 23:47

Ouais alors en même temps un site web c'est pas un Chagall. Le premier truc a essayer de faire passer au client, c'est d'abolir le mythe du PPP (Pixel Partout Pareil) dans la conception de site internet. Sinon c'est l'enfer. Pour le webdesigner, certes, mais aussi pour lui, car il sera éternellement frustré.

Et un décalage de 10 ou 20 pixel entre deux pages de navigation, c'est tout de même pas la mort. Le client ne va pas perdre des ventes là-dessus. Les gens ne vont pas faire de conjonctivites à cause de cet accident graphique.

Bon après, si un hack existe...

Enfin bref, le client est roi, mais si on peut expliquer au roi... ;)

#4 olivier

30/01/2006 09:23

@Marco > Non, je n'ai pas encore vu de site qui parle de ça, mais j'ai remarqué cette astuce dans un des designs de oswd.org (je ne sais malheureusement plus lequel).

Enfin bref, le client est roi, mais si on peut expliquer au roi... ;)

+1

#5 Jean

30/01/2006 17:49

pour firefox 1.5 --> overflow-y:scroll et ça marche

#6 pm13

02/02/2006 21:24

le overflow-y ne marche pas avec safari! perso j'ai rien dans body, j'ai un min-height: 101% dans le premier conteneur (qui est en position absolute), ça marche avec safari et ff, j'ai pas testé avec ie sous windows (par contre 100.1% ça marche pas sous safari, faut 101)

Avant Rendez-moi ma CSS, le retour Après Séminaire accessibilité du Web