TinyScroller est un script très léger (seulement 1.7 Ko) qui permet de transformer un DIV en une zone de texte défilent. Si vous n’aimez pas avoir recours aux « frames », voici une solution élégante qui permet d’obtenir un résultat similaire.
TinyScroller peut être utilisé dans n’importe quel code HTML et, si le navigateur s’avère un peu ancien, le script se « dégrade » ! Vous pourrez personnaliser votre section DIV via le fichier CSS.
L’implémentation est vraiment aisée… voici un code d’exemple repris du site de l’auteur de TinyScrooler :
<body> <div id="wrapper"> <div id="scroll"> <div id="scrollcontent"> <h1>TinyScroller</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet mauris at sapien iaculis pulvinar. Morbi ut mi in felis fringilla semper. Cras sapien lorem, sodales mattis, pellentesque eu, luctus ac, ante. Curabitur egestas aliquet erat. </p> <p>Nullam vestibulum, justo a gravida vulputate, orci dui cursus tellus, dapibus vulputate nibh sem consectetur libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam placerat, massa eget dignissim tempor, arcu ipsum condimentum elit, nec ullamcorper felis ante ut justo. Maecenas iaculis purus vel risus. Vestibulum convallis interdum elit. Aliquam sed diam. Sed leo. Etiam sed erat. Nullam vestibulum, justo a gravida vulputate, orci dui cursus tellus, dapibus vulputate nibh sem consectetur libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam placerat, massa eget dignissim tempor, arcu ipsum condimentum elit, nec ullamcorper felis ante ut justo. Maecenas iaculis purus vel risus. Vestibulum convallis interdum elit. Aliquam sed diam. Sed leo.</p> </div> <div id="scrollbar"> <div id="scroller" class="scroller"></div> </div> </div> </div> <script type="text/javascript"> TINY.scroller.init('scroll','scrollcontent','scrollbar','scroller','buttonclick'); </script> </body>
Site Internet : TinyScroller
Licence : Gratuit
Bonjour,
neuneu avec les scripts. On le range où le script ?
j’ai du mal a voir l’intérêt d’un tel script (je ne l’ai pas ouvert) hormis pour la customisation de la scrollbar.
Si c’est ça alors je lui préfère JScrollPane http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html ou la getsion de la roulette de la souris fonctionne mais il est vrai que JQuery est requis.
Sinon en CSS, il existe aussi overflow:scroll. Mais je doit dire que je préfère ce script qui permet de personnaliser la barre, ce qu’overflow ne fait pas.
De plus, la barre n’a pas la même epaisseur entre les navigateurs et les OS avec la technique du CSS, donc problèmes de décalages.
Merci pour cette découverte 🙂
Je suis comme toi, je ne vois pas l’intérêt par rapport à la commande CSS overflow.
J’ai aussi pensé à la propriété « overflow:scroll ».
+1 pour la customisation.