À quoi sert l’option fullpage.js normalScrollElementTouchThreshold?
Je ne comprends pas très bien cette option et son fonctionnement. Le document fournit une explication, mais quel est un exemple concret?
De docs:
normalScrollElementTouchThreshold : (valeur par défaut 5) Définit le seuil du nombre de sauts dans l’arborescence du noeud html. Fullpage testera si
normalScrollElementsest une correspondance permettant le défilement des div sur un périphérique tactile. (Par exemple:normalScrollElementTouchThreshold: 3)
- fullpage.js ajoute un effet de curseur de fondu
- FullPage.js – Ajoute une classe active à l’ancre de menu lorsque la section ne correspond pas
- CSS: changer les flèches sur toute la page JS?
- Désactiver fullpage.js sur les appareils mobiles (tactiles)
- jquery.fullPage.js comment activer le défilement dans un div sans affecter le défilement des sections
- Rendre les images de fond réactives – fullpage.js
- Fullpage.js Slide horizontal on scroll
- Ajout ou suppression de sections / diapositives dans fullPage.js après l’initialisation
L’option normalScrollElements fonctionne assez facilement sur les navigateurs de bureau car l’élément mouseover est propagé à travers la structure DOM.
Pour les appareils tactiles, cette implémentation est un peu plus complexe et c’est à cela normalScrollElementTouchThreshold le normalScrollElementTouchThreshold . L’ touchstart ou touchstart ne se propage pas de cette manière.
Lorsqu’un événement tactile est reconnu, l’élément le plus profond de la structure DOM qui se trouve sous votre doigt est renvoyé.
Cela signifie que si vous avez un plugin popup lightbox sur votre site, par exemple, et que vous voulez que cela fonctionne avec l’option normalScrollElements , alors si vous avez des divs ou des paragrphas à l’intérieur, ces éléments seront retournés à la place de votre conteneur lightbox auquel vous appliquez le normalScrollElements .
Par conséquent, pour que le plug-in puisse voir s’il est un élément à ignorer ou non, il doit remonter dans la structure DOM pour vérifier les éléments parents. Par défaut, il vérifiera jusqu’à 5 parents. Mais vous pouvez le changer si nécessaire.
Pour mieux illustrer cela, imaginez cette situation:
My Title Box1 Box1
Initialisation:
$('#fullpage').fullpage({ normalScrollElements: '.myLightBox', });
Si vous touchez votre lightobx au-dessus des éléments box , celui box ci sera renvoyé aux événements touchstart ou touchstart du plug- touchstart .
Comme vous avez défini la normalScrollElements sur myLightBox , la section normalScrollElements vers le haut ou le bas, car myLightBox est différent de l’élément box .
Pour résoudre ce problème, le plugin monte de 5 niveaux dans la structure DOM en les comparant avec vos valeurs dans normalScrollElements . Il va donc cocher la box , puis body et enfin myLightBox , ce qui fera que le plugin ignore le défilement automatique sur cet élément.