que fait exactement Data-anchor-target?

Question

Je suis en train de jouer avec Skrollr et, pour la plupart, cela semble assez intuitif, la seule chose qui me plaît est l'attribut data-anchor-target. La plupart du temps, je n'en ai pas besoin, mais quand je regarde quelques exemples, c'est généralement inclus et je suis confus quant à ce qu'il fait. Cela signifie-t-il simplement que, sur cette cible, les attributs de données (pos) de Skrollr entrent en jeu?

Answer 1

data-anchor-target Lorsque vous utilisez Skrollr.js, vous utilisez normalement l'une des deux méthodes comme entrées pour le démarrage et l'arrêt des commandes de défilement:

1. positionnement absolu, relatif au début ou à la fin du document entier .
2. Positionnement relatif, en haut, en bas ou au centre du cadre du navigateur de visualisation.

La balise data-anchor-target permet au développeur d'utiliser un autre élément pour déclencher une modification. Vous placez la position de contrôle directement dans le document. Les éléments sont identifiés à la balise cible avec des sélecteurs CSS simples (.class ou # id). Lorsque l'élément de balise data-anchor-target est déplacé dans la fenêtre de visualisation, le développeur peut utiliser le marqueur de mode relatif normal data-bottom-top pour lancer le résultat de défilement souhaité. Utilisez data-top-bottom comme contrôle lorsque la cible d'ancrage de données défile vers le haut et hors de la fenêtre de visualisation. Rappelez-vous cette image?

C'est vraiment cool, car cela permet un contrôle parfait pour différents dispositifs de visualisation, des orientations et des tailles d'écran. Jetez un oeil à l'exemple anchor-target.html. Remarquez comment le visage bleu sourit chaque fois que le visage rouge est visible dans le cadre? (Note: ne pas paniquer par l'identifiant CSS !0 dans cet exemple Rappelez-vous dans skroller, le symbole d'exclamation ! est utilisé pour corriger un champ numérique de modifier pendant le défilement.)