TinyScroller, DIV scrollable !

Publié le 10 décembre 2009 par Myrmex

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