La barre de défilement (scroll-bar) permet de faire défiler des images ou du texte dans un cadre de dimensions définies.
Regardons comment l'utiliser puisque certains visiteurs trouvent cette présentation intéressante car elle permet de présenter plusieurs photos dans un espage réduit....

le code
<p style="width: 200px; height: 110px; float: left; border: 2px solid green; background-color: pink; overflow: auto; white-space: nowrap; padding: 5px; "><img src="http://gifs.toutimages.com/images/drapeaux/canada/quebec.gif" /><img src="http://gifs.toutimages.com/images/drapeaux/canada/alberta.gif" /><img src="http://gifs.toutimages.com/images/drapeaux/canada/colombie_britannique.gif" /><img src="http://gifs.toutimages.com/images/drapeaux/canada/ile_du_princee_dward.gif" /></p>

le code:
<p style="width: 200px; height: 110px; float: left; border: 2px solid green; background-color: pink; overflow: auto; padding: 5px; margin: 10px 0px 0px 0px; text-align: center;"><img src="http://gifs.toutimages.com/images/drapeaux/canada/quebec.gif" /><img src="http://gifs.toutimages.com/images/drapeaux/canada/alberta.gif" /><img src="http://gifs.toutimages.com/images/drapeaux/canada/colombie_britannique.gif" /><img src="http://gifs.toutimages.com/images/drapeaux/canada/ile_du_princee_dward.gif" /></p>

  Dans les exemples ci-dessus, l'ascenseur est créé par l'attribut: overflow:auto
  Dans le premier exemple, nous indiquons au paragraphe de ne pas faire de changement de ligne après chaque image (ou mot) par white-space:nowrap ce qui fait que les images s'alignent sur une seule et même ligne et que la barre de défilement se place dessous.
  Dans le second exemple, nous indiquons au paragraphe de changer de ligne automatiquement: overflow:auto et le défilement sera vertical. Afin que les mots ou images soient centrés, nous ajoutons : text-align:center.

   Le principe étant acquit, regardons pour faire un défilement d'images: ces images ne seront peut-être pas toutes aux mêmes dimensions et il nous faudra décider de fixer la dimension du défilement et de laisser l'autre libre.
   Dans un défilement horizontal, la hauteur sera définie pour que chaque image rentre dans le câdre, sa largeur étant libre.
   Dans un défilement vertical, c'est la largeur qui sera définie et la hauteur qui sera libre.
   Une remarque: la barre de défilement s'insère dans le paragraphe et limite donc la place restante pour les images; elle mesure en moyenne 15px et il faut en tenir compte pour dimensionner les images.
   Nous pourrons également avoir des images de dimensions inférieures et nous les centrerons dans le paragraphe ... mais voyons tout ça en exemple...

exemples

le code
<p style="width: 200px; height: 110px; float: left; border: 2px solid green; background-color: pink; overflow: auto; white-space: nowrap; padding: 5px; box-shadow: 5px 5px black;"><img src="http://gifs.toutimages.com/images/ani_oiseaux/aigles/aigle_026.gif" style="height: 90px;" />   
<img src="http://gifs.toutimages.com/images/ani_oiseaux/aigles/aigle_024.gif" style="height: 90px;" />   
<img src="http://gifs.toutimages.com/images/ani_oiseaux/aigles/aigle_009.gif" style="height: 90px;" />   
<img src="http://gifs.toutimages.com/images/ani_oiseaux/aigles/aigle_038.gif" style="height: 90px;" />   
</p>

le code
<p style="width: 200px; height: 110px; float: left; border: 2px solid green; background-color: pink; overflow: auto; text-align: center; padding: 5px; box-shadow: 3px 3px black; margin: 10px 0px 0px 0px;"><img src="http://gifs.toutimages.com/images/ani_oiseaux/aigles/aigle_026.gif" style="width: 185px;" />   
<img src="http://gifs.toutimages.com/images/ani_oiseaux/aigles/aigle_024.gif" style="width: 185px;" />   
<img src="http://gifs.toutimages.com/images/ani_oiseaux/aigles/aigle_009.gif" style="width: 185px;" />   
<img src="http://gifs.toutimages.com/images/ani_oiseaux/aigles/aigle_038.gif" style="width: 185px;" />   
</p>

le code
<p style="width: 200px; height: 110px; float: left; border: 2px solid green; background-color: pink; overflow: auto; text-align: center; padding: 5px; box-shadow: 5px 5px black; margin: 10px 0px 0px 0px;"><img src="http://gifs.toutimages.com/images/ani_oiseaux/aigles/aigle_026.gif" />   
<img src="http://gifs.toutimages.com/images/ani_oiseaux/aigles/aigle_024.gif" style="width: 185px;" />   
<img src="http://gifs.toutimages.com/images/ani_oiseaux/aigles/aigle_009.gif" />   
<img src="http://gifs.toutimages.com/images/ani_oiseaux/aigles/aigle_038.gif" style="width: 185px;" />
</p>
Dans ce dernier exemple, nous laissons les images moins larges à leur dimensions normales et les centrons dans le paragraphe; les plus grandes sont reprises en largeur pour entrer dans le câdre (width:185px).