Une brève discussion sur la position de défilement scrollTop et scrollLeft_jquery des pages jQuery

Les pages Web sont souvent plus grandes que la fenêtre du navigateur qui affiche la page. Étant donné que les documents Web contiennent beaucoup de contenu, la page est souvent plus haute et parfois plus large que le navigateur, ce qui oblige les visiteurs à faire défiler l'intégralité. page (illustré dans la figure 10-8). Au fur et à mesure que les visiteurs font défiler, des parties du document disparaissent de la vue. Par exemple, une page Web ne rentre pas complètement dans la fenêtre du navigateur et le document défile vers la gauche ou vers le haut, de sorte que les côtés supérieur et gauche de la page disparaissent de la vue. Cela signifie que le coin supérieur gauche de la fenêtre du navigateur et le coin supérieur gauche du document ne sont pas identiques. Si vous essayez de placer un nouvel élément, par exemple une bannière dynamique en haut de l'écran, vous rencontrerez des problèmes si vous essayez simplement de définir les positions gauche et supérieure de l'élément sur 0. En fait, vous ne faites que le placer. en haut du document, mais en dehors de la fenêtre du navigateur.

Heureusement, jQuery propose deux fonctions qui vous permettent de déterminer la quantité de page qui défile depuis le haut et la gauche (en d'autres termes, combien de pixels du document existent au-dessus et à gauche de la fenêtre du navigateur). Pour déterminer quelle partie du document se trouve au-dessus de la fenêtre du navigateur, utilisez cette ligne de code :

Copier le code Le code est le suivant :

$(document).scrollTop()

Pour déterminer quelle partie du document se trouve sur le côté gauche de l'écran, utilisez cette ligne de code :

Copier le code Le code est le suivant :

$(document).scrollLeft()

Les deux fonctions renvoient une valeur de pixel que vous pouvez utiliser pour positionner un autre élément sur la page. Par exemple, si vous souhaitez positionner une fenêtre contextuelle au centre de la page même après que quelqu'un ait fait défiler vers le bas, vous devez déterminer jusqu'où le visiteur a défilé et déplacer la fenêtre contextuelle de manière à ce que la plupart des éléments supplémentaires se trouvent en bas de la page. Dans l'exemple d'une info-bulle qui apparaît, vous devez être prudent lorsque vous localisez l'info-bulle lorsque le visiteur a fait défiler une page vers le bas : il est facile de placer accidentellement l'info-bulle dans l'espace de la page, mais dans la vue du navigateur en dehors du visible. zone de la bouche. Utilisez scrollTop() pour éviter de placer une info-bulle au-dessus de la zone visible en haut de la fenêtre du navigateur.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.