Comment utiliser le plug-in mobile IScroll.js

Nous savons que le plug-in IScroll.js est compatible avec tous les événements de barre de défilement mobile. Sur certaines machines Android, nous ne pouvons pas faire fonctionner la barre de défilement via overflo:scroll mais IScroll.js peut en effet être placé dans un conteneur sécurisé. element Pour gérer le défilement, je vais vous donner une introduction détaillée à IScroll.js.

Remarque

Lorsque vous utilisez IScroll.js, vous devez avoir trois niveaux d'imbrication d'éléments, tels que :

<div class="food-left">
    <ul class="food-nav">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul></div>

La nourriture la plus à l'extérieur doit avoir deux styles CSS : position:relative; et débordement:caché.

Initialisation

IScroll.js nous expose un constructeur IScroll ;
Comme suit, nous initialisons la construction

<script type="text/javascript">
      leftScroll = new IScroll(".food-left");</script>

Les paramètres réels passés dans la fonction sont cohérents avec le nouveau paramètre querySelector dans ES6 ; en fait, querySelector est utilisé de la même manière que notre sélecteur jQuery
Remarque : nous devons l'initialiser après le chargement de la structure DOM, sinon il sera invalide ;

Paramètres

IScroll.js nous permet de passer le deuxième paramètre pour configurer les propriétés de l'événement scroll

leftScroll = new IScroll(".food-left", {
       scrollbars: true,
       bounce: false,
       mouseWheel:true,
       click:true});

Barre de défilement

scrollbars: true

S'il faut afficher les barres de défilement. La valeur par défaut est false ;

fadeScrollbars:true

La barre de défilement apparaît et disparaît en fondu, bien sûr à condition que votre barre de défilement soit affichée. La valeur par défaut est false ;

interactiveScrollbars

S'il faut faire glisser la barre de défilement. La valeur par défaut est false ;

resizeScrollbars

La longueur de la barre de défilement est définie proportionnellement. Si vous souhaitez une taille fixe, vous pouvez la définir sur true ;

bounce: false

S'il faut effectuer une animation de rebond lorsque le parchemin atteint la limite du conteneur. La valeur par défaut est true ;

mouseWheel:true

S'il faut afficher le défilement de la souris activé ; la valeur par défaut est false

invertWheelDirection

S'il faut activer le défilement inversé après l'activation du défilement de la souris ; ; la valeur par défaut est false ;

click:true

iScroll désactive le comportement de clic de souris par défaut. Si vous souhaitez utiliser le paramètre true ;

disableMouse、disablePointer、options.disableTouch

IScroll écoute tous les pointeurs par défaut. Si vous confirmez la plateforme sur laquelle le projet est positionné, vous pouvez désactiver les effets inutilisés pour réduire l'utilisation des ressources ; la valeur par défaut est fausse ;

startX、startY

Définir ; la position de décalage initiale de la barre de défilement ; la valeur par défaut est aucune ;

Methods

IScroll.js nous fournit également des méthodes pratiques, bien sûr, elles sont toutes sous l'objet instance ;

rightScroll.scrollToElement(el, time, offsetX, offsetY, easing)

Faites défiler jusqu'à l'élément entrant La position doit être un objet DOM alors le temps de défilement

scrollTo(x, y, time, easing)

peut être défilé ; vers n'importe quelle position. La position par défaut est 0. Si vous souhaitez vous déplacer, vous devez définir un nombre négatif ;

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. veuillez faire attention aux autres articles connexes sur le site Web PHP chinois !

Lecture connexe :

Comment utiliser XML2js dans nodej

Explication détaillée du module path de node.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!