Une barre de défilement dans un layer

 

Voir le résultat du Style dans la cellule ci-dessous :   Ecrire dans l'entête le style suivant :
Ce texte est inséré dans le conteneur DIV (entre <div> et </div>) c'est à dire dans un calque, lui-même inséré dans la cellule du tableau. On a donné un nom au calque et on a défini un style pour ce calque. La rêgle de style, définie dans l'entête (voir ci-contre), permet de créer une barre de déroulement grâce à la propriété "overflow". La valeur "auto" permet d'afficher une scrollbar uniquement si elle est nécessaire. L'emploi de div avec un feuille de style permet de contrôler encore mieux la mise en page et d'incorporer un texte assez long dans une cellule relativement petite. Cette règle de style qui met en jeu la barre de défilement n'est reconnue que par Internet Explorer, hélas !...
<style type="text/css">
#deroulant {
width: 250px;
height: 100px;
overflow: auto;
border: 0px;
}
</style>
Dans la cellule du tableau, on insère le calque contenant le texte.
...<td>
.....<div id="deroulant">
........Texte apparaissant dans la cellule
.....</div>
...</td>...
On peut définir également d'autres règles de styles : > Style Correspondant
On peut également préciser d'autres règles de style concernant par exemple le texte ou bien encore la couleur de la barre de défilement. On peut imposer une police en particulier ainsi qu'une taille et une couleur pour les caractères. On peut aussi justifier le paragraphe avec éventuellement une indentation comme on le ferait pour un bloc de texte normal. Il est préferable de définir un espace d'encadrement (padding) pour que les caractères ne soient pas collés à la barre de défilement ce qui rend le texte quelque peu illisible. En ce qui concerne la barre de déroulement, on peut la personnaliser en définissant des couleurs comme on l'a fait pour l'élément body sauf qu'ici, ce style ne s'applique qu'au calque en question (voir ci-contre). Comme c'est le cas pour la barre de défilement, le style qui régie sa couleur n'est pris en compte que par Internet Explorer.
#deroulant2 {
width: 305px;
height: 100px;
overflow: auto;
border: 0px;
scrollbar-face-color: #98a300;
scrollbar-shadow-color: #5a6200;
scrollbar-highlight-color: #d0e100;
scrollbar-3dlight-color: #d0e100;
scrollbar-darkshadow-color: #5a6200;
scrollbar-track-color: #ffffff;
scrollbar-arrow-color: #322561;
color:#98a300;
font-family:"Verdana";
font-size:12px;
text-align:justify;
text-indent:20px;
padding: 5px;
}