jQuery plugin desoScroll

Présentation

Ce plugin permet de créer un callback lorsque le scroll de la page arrive au niveau d’un certain élément HTML.

Installation

Inclure jQuery et le plugin desoScroll dans votre page HTML :

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/desoscroll.js"></script>

Dans l’exemple ci-dessous, on souhaite détecter lorsque le scroll arrive au niveau de #comments.

<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices dictum ante, nec interdum felis mollis vitae. Mauris porta urna nec lorem semper cursus. Etiam nec dignissim turpis. Integer a lobortis orci. Suspendisse rhoncus massa dapibus ligula tempor molestie. Etiam consectetur quam et felis interdum sit amet posuere quam fermentum. Suspendisse nibh nulla, auctor et auctor at, placerat sit amet erat.

Sed tempor mi id erat viverra vestibulum. Donec euismod justo metus. Integer eleifend lacus sit amet dui ullamcorper quis elementum tellus placerat. Quisque ac justo ligula. Ut molestie gravida risus ac vestibulum. Vivamus semper eros vitae dui fringilla eget bibendum odio interdum. Suspendisse non blandit augue. Fusce vitae velit metus, ac vestibulum dui. Fusce eget velit arcu. Aenean quis varius enim.

In viverra neque libero. Ut non pretium tortor. Duis nunc ipsum, aliquet varius dignissim nec, ullamcorper id arcu. Morbi nec cursus sem. Ut ac justo nulla, eu elementum diam. Suspendisse est elit, tincidunt eu mattis accumsan, placerat quis ipsum. Nunc tincidunt, arcu eu vulputate dapibus, lectus leo ullamcorper quam, id fermentum leo mi iaculis augue. Proin vitae odio pharetra nulla imperdiet aliquam. Aenean sed neque erat, non faucibus leo. Sed metus augue, imperdiet ut lobortis ac, pulvinar vel dolor. Curabitur dui quam, aliquam ac mattis quis, bibendum a mi. Sed viverra libero non risus dictum ac venenatis metus rutrum. Nulla consectetur mauris vitae nisl viverra adipiscing. Proin pellentesque erat a libero cursus sed laoreet velit aliquam. Mauris convallis semper quam, sit amet tempor nisl fermentum sit amet.

Donec fringilla pellentesque orci, ac pellentesque nunc dictum id. Fusce quis lectus mauris. Nunc mollis vulputate purus, vitae malesuada massa varius ac. Vivamus varius, massa sed dignissim laoreet, lorem magna luctus odio, eget sodales odio velit at felis. Nulla fringilla lacinia diam ac sagittis. Ut pharetra turpis id lectus porttitor at ultrices lorem accumsan. Etiam vitae congue nisl. Aenean non lectus nec lorem luctus pharetra. Proin malesuada, sem eget volutpat mollis, odio arcu fermentum ipsum, in vulputate sapien risus ut felis. Donec vulputate auctor mauris, in consequat eros accumsan sed. Fusce quis pharetra tortor. Aliquam ut dolor massa. Pellentesque id metus eu metus hendrerit elementum eu vel neque. Nullam tincidunt, libero sit amet interdum lobortis, risus ipsum ultricies urna, placerat iaculis eros lacus vitae mauris. Pellentesque nec lacus vel felis interdum egestas at a lacus.

Donec fringilla pellentesque orci, ac pellentesque nunc dictum id. Fusce quis lectus mauris. Nunc mollis vulputate purus, vitae malesuada massa varius ac. Vivamus varius, massa sed dignissim laoreet, lorem magna luctus odio, eget sodales odio velit at felis. Nulla fringilla lacinia diam ac sagittis. Ut pharetra turpis id lectus porttitor at ultrices lorem accumsan. Etiam vitae congue nisl. Aenean non lectus nec lorem luctus pharetra. Proin malesuada, sem eget volutpat mollis, odio arcu fermentum ipsum, in vulputate sapien risus ut felis. Donec vulputate auctor mauris, in consequat eros accumsan sed. Fusce quis pharetra tortor. Aliquam ut dolor massa. Pellentesque id metus eu metus hendrerit elementum eu vel neque. Nullam tincidunt, libero sit amet interdum lobortis, risus ipsum ultricies urna, placerat iaculis eros lacus vitae mauris. Pellentesque nec lacus vel felis interdum egestas at a lacus.

Etiam non arcu nec enim volutpat imperdiet. Mauris nec sem lacus. Etiam laoreet laoreet lacus non lacinia. Sed quis odio velit, id lobortis dolor. Nunc quam leo, tempor ac dapibus eget, commodo vel nulla. Sed aliquet, enim sit amet luctus egestas, nisi leo sollicitudin neque, non imperdiet urna ante in arcu. In ultrices sagittis orci egestas ultricies. Cras nisl mi, sodales vitae fringilla quis, vulputate convallis elit. Integer augue orci, vestibulum ut fermentum et, hendrerit ac diam. Nunc lectus sapien, molestie id posuere eget, sodales sit amet arcu. Mauris fringilla mi tincidunt urna porttitor porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>

<div id="comments">Commentaires</div>

Appel du plugin

Utiliser le plugin en tant que méthode de l’élément souhaité.

$(document).ready(function() {
	$('#comments').desoScroll({
		'callback': function(el) {
			el.hide().html('Chargement en cours...').fadeIn(1000);
		}
	});
});

Rendu

Voir la démonstration

Télécharger

jQuery
jquery.desoscroll.min.js (515 B) jquery.desoscroll.js (1005 B)