fReAkStyLe

Tous bons webmasters se sont un jour demander pourquoi nos navigateurs n’étaient pas dotés de barre de défilement « nice ». Quand on voit ce que fait l’iPhone, on a tout simplement envie de reproduire cet effet smoothy ! (à bon escient) :

Merci à cubiq et son plugin jQuery

Testons le en 3 petites étapes :

Avant tout, il nous faut inclure la librairie, c’est une formalité :

<script type="text/javascript" src="http://cubiq.org/dropbox/iscroll4/src/iscroll.js"></script>

La première

Surcharger l’événement de « gesture » touchmove (glissement de doigt) :

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

La deuxième

Gérer le callback du chargement du support client (DOMLoaded) :

document.addEventListener('DOMContentLoaded', setTimeout(function () { onDocumentLoaded(); }, 200), false);
// ou
$(window).load(onDocumentLoaded);

En enfin la dernière étape

Appliquer le plugin au bloc, en l’occurence « wrapper »

var myScroll;
var onDocumentLoaded = function() {
	myScroll = new iScroll('wrapper');
}

l’élément wrapper pouvant être par exemple comme ça (on en profite pour include la librairie

<div id="wrapper">
  <ul><li>nothing</li><li>nothing</li><li>nothing</li><li>nothing</li><li>nothing</li><li>nothing</li><li>nothing</li><li>nothing</li></ul>
</div>

Et le tour est joué, admirez :

Démo