[Résolu] Boite avec scroll vertical

Bonjour,

Je voudrais faire une boite d'une hauteur et d'une largeur fixe avec un scroll vertical et aucun scroll horizontale.
Je ne parviens pas à le faire et surtout je voudrais que ce soit relativement compatible avec les navigateurs IE 5 et + et FF 1.5 et +

Connaissez vous une bonne méthode ou bien un tutoriel qui aborde ce sujet correctement ?

Merci d'avance et meilleurs vœux à tout le monde
Modifié par neutronweb (04 Jan 2008 - 22:28)

Bonjour,

Soit je n'ai pas bien saisi la question, soit tu devrais prendre l'habitude de faire quelques petites recherches tant le sujet est récurrent.

div {width:50%; height:200px; overflow:auto;}

J'ai cherché...

Le fait est que je ne veux qu'un scroll vertical, present meme quand non necessaire et surtout d'apres ce que j'ai lu ceci n'est pas compatible partout mai sj'ai n'est pas trouvé de precision et encore moi la solution qui fonctionne sur le plus de navigateurs et je n'ai pas 10 navigateurs pour tester malheureusement !

Salut,

Tu peux essayer de le forcer avec :

overflow-y:scroll;

ok mai sil me semble que cette propriété n'est pas supportée partout.

J'ai trouvé ceci mais le site ne me sembe pas très fiable :

Comme vous pouvez le constater la feuille de style ou css (cascading style sheets) overflow-y n'est pas compatible avec les navigateurs comme Firefox >1.5/Nestcape.
Pour faire le même effet vous devez utilisez le code suivant :

#dmcscroll{ 
display: block; 
overflow:hidden; 
overflow-x: hidden; 
overflow-y: auto; 
overflow : -moz-scrollbars-vertical; 
}

Est ce que vous avez une expérience sur ceci ?
Modifié par Igor (04 Jan 2008 - 20:56)

neutronweb a écrit :

Le fait est que je ne veux qu'un scroll vertical, present meme quand non necessaire

Dans ce cas, la solution proposée par papyjo est effectivement à retenir. Notons toutefois que la déclaration invalide une feuille de styles de niveau 2.1.

neutronweb a écrit :
ok mai sil me semble que cette propriété n'est pas supportée partout.

De mémoire, la propriété est me semble-t-il implémentée par MSIE depuis la version 5.5 ainsi que par les autres butineurs modernes.

Benjamin D.C. a écrit :
Notons toutefois que la déclaration invalide une feuille de styles de niveau 2.1.

Rappel: l'invalidité d'une feuille de style pour cause de propriété inconnue n'a aucun effet sur le sens du vent ni sur l'âge du capitaine. Seul le suivi qualité s'en trouve un peu compliqué.

Donc overflow-y:scroll; ?
Le probleme c'est que ceci me met aussi un scroll horyzontale !

Non pardon je dit n'importe quoi !

Par contre avez vous une opinion sur ce que j'ai trouvé sur un site web plus ou moins valide :

a écrit :
Comme vous pouvez le constater la feuille de style ou css (cascading style sheets) overflow-y n'est pas compatible avec les navigateurs comme Firefox >1.5/Nestcape.
Pour faire le même effet vous devez utilisez le code suivant :

#dmcscroll{
display: block;
overflow:hidden;
overflow-x: hidden;
overflow-y: auto;
overflow : -moz-scrollbars-vertical;
}

neutronweb a écrit :
Par contre avez vous une opinion sur ce que j'ai trouvé sur un site web plus ou moins valide

Ben déjà ils se plantent, overflow-x|y est supporté par Firefox depuis la version 1.5, ce sont donc les versions inférieures (très peu répandues à l'heure actuelle) qui ne supportent pas cette propriété.

Au niveau des implémentations, je n'ai pas le détail, mais:
- FF2, IE6-7 et Safari3 = ok;
- Opera 9 = pas ok.

La solution proposée est par contre gênante. Avec les navigateurs qui ne supportent pas overflow-x|y, on n'aura pas accès aux contenus si le défilement est nécessaire pour ça.

On préfèrera donc:

div {
	height: 400px;
	width: 300px;
	overflow: [b]auto[/b];
	overflow-x: hidden;
	overflow-y: scroll;
}

Donne le bon rendu dans tous les navigateurs testés (les mêmes que ci-dessus), sauf dans Opera 9 où on obtient une double barre de défilement si on a un contenu trop large (et seulement dans ce cas).

Il me semblai bien que ce site n'etait pas fiable.

Merci beaucoup pour toutes ces precisions.

Je precserais que contrairement à ce qui a été dit plus haut, il vaut mieux placer la propriété overflow en dernier sinon sous FF2 une barre de scroll apparait mais il n'est pas possible de scroller meme si le contenu doit l'etre.

A savoir :

div {
height: 400px;
width: 300px;
overflow-x: hidden;
overflow-y: scroll;
overflow: auto;
}

neutronweb a écrit :
Je precserais que contrairement à ce qui a été dit plus haut, il vaut mieux placer la propriété overflow en dernier sinon sous FF2 une barre de scroll apparait mais il n'est pas possible de scroller meme si le contenu doit l'etre.

Bizarre, je n'avais pas eu ce comportement. Soit j'avais regardé un peu vite, soit il y a d'autres facteurs en jeu.