Site officiel: http://iscrolljs.com/
La structure DOM la plus simple de Iscroll:
<div id = "wrapper"> <ul> <li> ... </li> <li> ... </li> ... </ul> </div>
Initialiser Iscroll
var myscroll = new isCroll ('# wrapper', options);Initialiser les paramètres
Initialiser l'exemple d'utilisation des paramètres:
var myscroll = new isCroll ('# wrapper', {MouseWheel: true, Scrollbars: true});Liste des paramètres:
Appartient à | Nom d'attribut | illustrer | valeur par défaut |
|---|---|---|---|
Bibliothèque de base Croe | options. | S'il faut utiliser la propriété de transformation de CSS3 | vrai |
options. | Que ce soit pour utiliser la propriété de transition de CSS3, sinon utiliser à la place DemandeanimationFram à la place | vrai | |
options.hwcompositing | S'il faut permettre l'accélération matérielle | vrai | |
options. | Que ce soit pour permettre l'effet d'animation élastique, désactivez pour accélérer | vrai | |
Caractéristiques de base Caractéristiques de base | options.click | S'il faut activer l'événement de clic. Il est recommandé d'éteindre cette option et d'activer les événements de TAP personnalisés (options.tap) | FAUX |
options.disablemouse | S'il faut désactiver la détection des événements de la souris. Si vous savez quelle plate-forme fonctionne, vous pouvez lui permettre d'accélérer. | FAUX | |
options.disablepointer | S'il faut désactiver la détection des événements du pointeur. Si vous savez quelle plate-forme fonctionne, vous pouvez lui permettre d'accélérer. | FAUX | |
options.disableTouch | Que ce soit désactiver la détection des événements tactiles. Si vous savez quelle plate-forme fonctionne, vous pouvez lui permettre d'accélérer. | FAUX | |
options.EventPassthrough | Lorsque vous utilisez l'axe horizontal d'Iscroll à rouler, si vous souhaitez utiliser l'axe vertical du système pour rouler et prendre effet sur l'axe horizontal, veuillez activer. Demo de passhoux de l'événement | FAUX | |
options.freescroll | Il est principalement utilisé lorsque le défilement vers le haut, vers le bas, la gauche et la droite prend effet et peut être défilé dans n'importe quelle direction. Démo 2D Scroll | FAUX | |
options.Keybindings | Événement de clé de liaison. Liaisons clés | FAUX | |
options.invertwheeldirection | Roue de souris inversée. | FAUX | |
options.Momentum | Que ce soit pour activer l'animation de démarrage, désactivez-le pour améliorer l'efficacité. | vrai | |
options. | Que ce soit à écouter les événements de roue de souris. | FAUX | |
options.PreventDefault | S'il faut bloquer l'événement par défaut. | vrai | |
options.scrollbars | S'il faut afficher la barre de défilement par défaut | FAUX | |
options.scrollx options.scrolly | Vous pouvez définir s'il faut afficher les barres de défilement horizontale ou verticale | Scrollx faux Scrolly True | |
options.tap | S'il faut activer les événements de TAP personnalisés Vous pouvez personnaliser le nom de l'événement TAP | FAUX | |
Barre de défilement Barres de défilement | options.scrollbars | S'il faut afficher la barre de défilement par défaut | FAUX |
options.fadescrollbars | Que ce soit pour s'estomper la barre de défilement, éteignez-la pour accélérer | vrai | |
options.interactifscrollbars | L'utilisateur peut-il faire glisser la barre de défilement | FAUX | |
options.RésisensercrollBars | Que ce soit pour fixer la taille de la barre de défilement, il est recommandé de l'activer lors de la personnalisation de la barre de défilement. | FAUX | |
options.shrinkscrollbars | L'opportunité de rétrécir la barre de défilement lorsque le défilement dépasse la limite de défilement. 'Clip': recadrer la barre de défilement au-delà «Échelle»: mise à l'échelle de la barre de défilement en proportion (occupe les ressources CPU) Faux: pas de retrait, | FAUX | |
OptionS.Indicators | Indique comment ISCROLL doit être défilé, l'implémentation sous-jacente des barres de défilement. | ||
options.indicators.el | Créez un conteneur pour les barres de défilement. Le premier élément du conteneur est l'indicateur. Par exemple: Indicateurs: { el: document.getElementByid ('indicateur') } Indicateurs: { El: '#indicator' } | ||
options.indicators.ignoreboundaries | S'il faut ignorer les limites des conteneurs. Réglé sur true pour définir la vitesse de défilement démo parallélax | FAUX | |
options.indicators.Listenx options.indicators.Listeny | L'indicateur surveille le défilement de cette direction, qui peut être réglé dans une direction ou deux directions. | vrai | |
options.indicators.speedratiox options.indicators.speedratioy | Vitesse de l'indicateur par rapport à la barre de défilement principale | 0 | |
options.indicators.fade options.indicators.interactive options.indicators.resize options.indicators.shrink | Paramètres comme les barres de défilement Démo minimap | ||
options.probetype | Iscroll-Probe.js doit prendre effet Probetype: 1 déclenché lorsque le défilement n'est pas occupé Probetype: 2 déclenché à chaque fois lorsqu'il fait défiler Probtype: 3 déclenché une fois par pixel rouleau | ||
SPART PAGE SNAP | options.snap | Diviser automatiquement les conteneurs pour avoir l'effet des lanternes renouvelables, etc. Options.snap: true // divisé automatiquement en fonction de la taille du conteneur Options.snap: segment el // selon l'élément | FAUX |
Zoom zoom | options.zoom | S'il faut allumer le zoom Il est préférable d'utiliser iscroll-zoom.js Si le grossissement est flou, le conteneur source peut être défini comme 2 fois la taille, puis l'échelle (0,5) démo zoom | FAUX |
options.zoommax | Niveau de zoom maximum | 4 | |
options.zoommin | Niveau de zoom minimum | 1 | |
options.startzoom | Niveau de mise à l'échelle initial | 1 | |
options. | Roller Réglé sur «zoom», vous pouvez zoomer avec la roue de défilement | indéfini | |
Plus de paramètres | options.bindtowrapper | Que ce soit pour arrêter de faire défiler lorsque le curseur ou le toucher dépasse le conteneur | FAUX |
options. | Effet d'animation élastique Effets prédéfinis: «quadratique», «circulaire», «dos», «rebond», «élastique» (les deux derniers ne peuvent pas être exprimés via CSS3) Vous pouvez également personnaliser les effets Bounceasing: { Style: 'Cubic-Bezier (0,0,1,1)', // CSS3 fn: fonction (k) {return k; } // Lorsque vous utilisez une demande de demandes } | 'circulaire' | |
options.bouncetime | Le nombre de millisecondes d'animation élastique dure | 600 | |
Options.Dénération | Décélération de l'élan roulant Plus il est important, plus le prix recommandé n'est pas supérieur à 0,01 | 0,0006 | |
options.Mousewheelspeed | Vitesse de roue de souris | ||
options.preventdefaultException | Liste quels éléments ne bloquent pas les événements par défaut; | {tagname: / ^ (entrée | TextArea | Button | Sélectionner) $ /} | |
options. Résizolling | Recalculer l'intervalle de temps iscroll lors du redimensionnement de la fenêtre | 60 | |
Reliure clé | options.Keybindings | Écoutez les événements clés pour contrôler Iscroll Par exemple: KeyBindings: { PageUp: 33, Pagedown: 34, fin: 35, Accueil: 36, à gauche: 37, Up: 38, À droite: 39, vers le bas: 40 } | |
API ISCROLL5:
Appartient à | Nom de méthode | illustrer |
|---|---|---|
rouleau | Scrollto (x, y, temps, assouplissement) | Faites défiler vers: x, y, événement, méthode d'assouplissement x: int y: int Temps: int Soulagement: quadratique | circulaire | Retour | Bounce | élastique Voir l'objet iscroll.utils.ease exemple: myscroll.scrollto (0, -100, 1000, iscroll.utils.ease.elastic); |
Scrollby (x, y, temps, assouplissement) | Faites défiler vers un endroit par rapport à la position actuelle Les autres sont les mêmes que ci-dessus | |
ScrollToElement (El, Time, Offsetx, Offsety, Felling) | Faites défiler vers un élément. el est le paramètre requis Offsetx / Offsety: déplacement par rapport à l'élément EL. Réglé sur True pour être le centre de l'écran Faites défiler vers l'élément | |
SPART PAGE SNAP | GotOpage (x, y, temps, assouplissement) | Divisez la page en fonction des options.snap et passez à une page dans le paysage ou le portrait. XY peut prendre effet en même temps. Utiliser en combinaison avec des options.snap |
suivant() prev () | Page précédente, page suivante Utiliser en combinaison avec des options.snap | |
Zoom | zoom (échelle, x, y, temps) | Récipient à l'échelle Échelle: facteur de mise à l'échelle |
rafraîchir | rafraîchir() | Actualiser Iscroll |
détruire | détruire() | Détruisez Iscroll et économisez des ressources |
Événements Iscroll:
beForrollstart | L'utilisateur clique sur l'écran, mais n'a pas encore été initialisé avant de faire défiler |
|---|---|
scrollcancel | Annuler après avoir initialisé le défilement |
faire défiler | Commencer à faire défiler |
rouleau | Défilement |
se précipiter | Rallonge |
feuilleter | Appuyez sur l'écran gauche et droit |
zoom | Démarrage de démarrage |
zoomer | Fin de zoom |
Exemple d'utilisation des événements:
myscroll = new isCroll ('# wrapper'); myscroll.on ('Scrollend', dosomething);Propriétés d'Iscroll:
myscroll.x / y | Emplacement actuel |
|---|---|
myscroll.directionx / y | La direction de défilement de la dernière fois (-1 vers le bas / à droite, 0 reste original, 1 haut / gauche) |
myscroll.currentpage | Informations sur SNAP actuelles |
myscroll.maxscrollxmyscroll.maxscrolly | myscroll.x / y lors du défilement vers le bas |