jQuery crée une imitation de la barre de défilement de Mac Lion OS effect_jquery

nanoScrollerJS est un plug-in jQuery qui utilise un moyen simple pour obtenir l'effet de barre de défilement du système Mac OS X Lion. Ce plugin de barre de défilement utilise une structure HTML minimale .nano > Les autres éléments de la barre de défilement .pane > .nano-slider sont chargés dynamiquement lorsque le plugin est en cours d'exécution. Ce plug-in de barre de défilement utilise des barres de défilement natives pour fonctionner sur iPad, iPhone et certaines tablettes Android.

Comment utiliser

Structure HTML

Voici la structure HTML nécessaire au fonctionnement du plug-in de barre de défilement :

Copier le code Le code est le suivant :

... contenu ici ...

Les noms de classe de nano et nano-content peuvent être modifiés via les paramètres du plug-in (après la modification, le fichier CSS du plug-in doit également être modifié en conséquence).

Style CSS

Introduisez le fichier nanoscroller.css dans HTML

.

Copier le code Le code est le suivant :

Vous devez spécifier une largeur et une hauteur pour le conteneur et personnaliser certains styles de base pour votre barre de défilement, par exemple :

Copier le code Le code est le suivant :

.nano { arrière-plan : #bba ; largeur : 500 px ; hauteur : 500px > .nano > .nano-pane > .nano-slider { arrière-plan : #111 ;


JAVASCRIPT

Introduisez le fichier jquery.nanoscroller.js dans la page.

Copier le code Le code est le suivant :

Utilisez ensuite la méthode suivante pour appeler le plug-in de barre de défilement. Cette méthode sera appliquée à tous les éléments DOM avec .nano en HTML :

Copier le code Le code est le suivant : $(".nano").nanoScroller();

Méthodes avancées

Faites défiler vers le haut :

Copier le code Le code est le suivant : $(".nano").nanoScroller({ scroll: 'top' });

Faites défiler vers le bas :

Copier le code Le code est le suivant : $(".nano").nanoScroller({ scroll: 'bottom' });

Faites défiler vers le haut avec un décalage :

Copier le code Le code est le suivant : $(".nano").nanoScroller({ scrollTop: value });

Faites défiler vers le bas avec une valeur de décalage :

Copier le code Le code est le suivant : $(".nano").nanoScroller({ scrollBottom: value });

Faire défiler un élément :

Copier le code Le code est le suivant : $(".nano").nanoScroller({ scrollTo: $('#a_node') });

Arrêtez de faire défiler. Cette option invalidera tous les événements liés du plug-in de barre de défilement et masquera la barre de défilement de l'interface utilisateur.

Copier le code Le code est le suivant : $(".nano").nanoScroller({ stop : true });

détruire

Détruisez la barre de défilement nanoScroller et réinitialisez la barre de défilement à la barre de défilement native du navigateur :

Copier le code Le code est le suivant :

$(".nano").nanoScroller({ destroy: true });

Réglez la barre de défilement pour qu'elle clignote. Le temps de clignotement est défini par paramètres (par défaut 1,5 seconde).

Copier le code Le code est le suivant :

$(".nano").nanoScroller({ flash: true });

nanoScroller();

Actualisez la barre de défilement. Cette opération recalculera simplement la position et la hauteur de la barre de défilement :

Copier le code Le code est le suivant :

$(".nano").nanoScroller();

Événements personnalisés

défilement

Un événement scrollend personnalisé sera déclenché à chaque fois que la barre de défilement défilera vers le bas du conteneur. (Lorsque la barre de défilement a atteint le bas du conteneur, cet événement ne sera pas déclenché lorsque l'utilisateur fera à nouveau défiler)

Copier le code Le code est le suivant :

$(".nano").bind("scrollend", function(e){
console.log("actuel HTMLDivElement", e.currentTarget);
});

Certains navigateurs déclencheront cet événement plusieurs fois en même temps, donc jQuery .bind ou .on doit être utilisé pour lier cet événement. Vous pouvez utiliser le plugin jquery-debounce pour que le navigateur déclenche cet événement toutes les 100 millisecondes :

Copier le code Le code est le suivant :

$(".nano").debounce("scrollend", function() {
alert("La fin");
}, 100);

défilement

Identique à l'événement scrollend, il est déclenché à chaque fois que l'utilisateur fait défiler vers le haut du conteneur.

L'événement scrollend est le même que l'événement scrolltop, il se déclenche à chaque fois que l'utilisateur fait défiler. Cet événement est livré avec les paramètres de l'objet js de la position actuelle, de la hauteur maximale et de la direction (haut ou bas) de la barre de défilement :

Copier le code Le code est le suivant :

$(".nano").on("update", function(event, valeurs){
console.debug(valeurs);
});

Paramètres de configuration

Il existe un ensemble de paramètres disponibles dans ce plug-in de barre de défilement :

iOSNativeScrolling

Si vous souhaitez utiliser des barres de défilement natives dans iOS 5, vous pouvez les définir sur true . Les barres de défilement natives fonctionneront mieux dans iOS 5.

Notez que lorsque iOSNativeScrolling est défini sur true, .pane et .slider ne seront pas générés/ajoutés par l'appareil pour prendre en charge les barres de défilement natives.

Valeur par défaut : faux.

Copier le code Le code est le suivant :

$(".nano").nanoScroller({ iOSNativeScrolling : true });

sliderMinHeight

Définissez la hauteur minimale de l'élément de défilement :

Valeur par défaut : 20.

Copier le code Le code est le suivant :

$(".nano").nanoScroller({ sliderMinHeight : 40 })

sliderMaxHeight

Définissez la hauteur maximale de l'élément de défilement :

Valeur par défaut : nulle.

Copier le code Le code est le suivant :

$(".nano").nanoScroller({ sliderMaxHeight: 200 });

empêcher le défilement des pages

Définissez sur true pour empêcher la page de défiler lorsque le contenu du conteneur défile vers le haut ou le bas :

Valeur par défaut : faux.

Copier le code Le code est le suivant :

$(".nano").nanoScroller({ PreventPageScrolling: true });

désactiverResize

Définissez sur true pour empêcher le nanoscroller de changer de taille. Si vous définissez cette option sur true, n'oubliez pas d'appeler la méthode de réinitialisation, sinon des problèmes étranges surviendront :

Valeur par défaut : faux.

Copier le code Le code est le suivant :

$(".nano").nanoScroller({ DisableResize: true });

toujoursVisible

Définissez sur true pour désactiver la fonction de masquage automatique lorsque la barre de défilement s'arrête :

Valeur par défaut : faux.

Copier le code Le code est le suivant :

$(".nano").nanoScroller({ toujoursVisible : true });

flashDelay

Lorsque vous activez l'option flash, cette option permet de spécifier le délai du flash :

Valeur par défaut : 1500.

Copier le code Le code est le suivant :

$(".nano").nanoScroller({ flashDelay : 1000 });

paneClass

Le nom de classe de l'élément de piste de la barre de défilement. Si vous le modifiez, vous devez apporter les modifications correspondantes dans le fichier CSS :

Par défaut : 'nano-pane'.

Copier le code Le code est le suivant :

$(".nano").nanoScroller({ sliderClass: 'scrollSlider' });

contentClass

Le nom de classe du div du conteneur de barre de défilement. Si vous le modifiez, vous devez apporter les modifications correspondantes dans le fichier CSS :

Par défaut : « nano-contenu ».

Copier le code Le code est le suivant :

$(".nano").nanoScroller({ contentClass: 'sliderContent' });

ongletIndex

Définissez l'ordre du contenu défilant. Lorsqu'il est défini sur -1, l'utilisation de la touche de tabulation ignorera le contenu :

Valeur par défaut : 0.

Copier le code Le code est le suivant :

$(".nano").nanoScroller({ tabIndex: 0 });

Compatible avec les navigateurs

Bureau

IE7
Firefox 3
Chrome
Safari 4
Opéra 11h60
Appareils mobiles

iOS 5 (iPhone, iPad et iPod Touch)
iOS 4 (livré avec un plug-in)
Android Firefox
Navigateur natif Android 2.2/2.3 (livré avec un plug-in)
Android Opera 11.6 (livré avec un plug-in)
Mieux vaut exécuter nanoScroller dans les navigateurs d'appareils mobiles via des plug-ins

Vous pouvez utiliser overthrow.js pour améliorer le fonctionnement de nanoScroller sur les navigateurs mobiles. Il simule le débordement CSS ( overflow: auto;/overflow: scroll; ) sur les appareils mobiles.

Pour utiliser overthrow, introduisez overthrow.js dans la page :

Copier le code Le code est le suivant :

Ensuite, ajoutez la classe de renversement dans votre div de contenu de barre de défilement :

Copier le code Le code est le suivant :

... contenu ici ...

Ce qui précède explique comment utiliser le plug-in nanoscroller. J'espère que vous l'aimerez.