Maison >interface Web >js tutoriel >Comment positionner la couche fixe dans les compétences js_javascript

Comment positionner la couche fixe dans les compétences js_javascript

WBOY
WBOYoriginal
2016-05-16 16:44:311176parcourir

Vous devez obtenir les coordonnées de certains objets HTML pour définir les coordonnées du calque cible de manière plus flexible. Ici, vous pouvez utiliser des attributs tels que document.body.scrollTop, mais ces attributs se trouvent dans les pages Web xhtml standard, ou plus simplement, avec <. ;! La valeur obtenue de la balise DOCTYPE...> est 0 ; si cette balise n'est pas utilisée, tout ira bien Alors comment obtenir les coordonnées du corps en xhtml ? Bien sûr, il existe un moyen. Nous utilisons document.documentElement pour remplacer document.body. Par exemple, nous pouvons écrire comme ceci :

Copier le code. Le code est le suivant :

var top=document.documentElement.scrollTop ||document.body.scrollTop

|| chose, non seulement peut être utilisé dans les instructions conditionnelles if, mais peut également être utilisé pour l'affectation de variables. L'exemple ci-dessus peut être écrit dans le format suivant :
Copier le code<.> Le code est le suivant :
var top=document.documentElement.scrollTop ?document.documentElement.scrollTop : document.body.scrollTop

Écrire comme ceci peut avoir une bonne compatibilité. Une autre chose à noter est que si la valeur de document.documentElement.scrollTop n'est pas déclarée, 0 sera affiché à la place.


Comment positionner la couche fixe dans les compétences js_javascript
Explication : Pour obtenir la position des coordonnées verticales des coordonnées de la barre de défilement sur la page actuelle : utilisez
document.documentElement.scrollTop au lieu de
document.body .scrollTop ;
document.documentElement obtient la balise html,
document.body obtient la balise body
Sous le standard w3c, document.body.scrollTop vaut toujours 0, vous devez utiliser document.documentElement.scrollTop ; . Au lieu de cela :
Si nous voulons positionner la position absolue de la souris par rapport à la page, la plupart des moteurs de recherche que nous obtiendrons vous demanderont d'utiliser
event.clientX document.body.scrollLeft, event.clientY. document.body. scrollTop;
Si vous trouvez que la souris s'écarte de votre imagination, ce n'est pas du tout surprenant, car IE5.5 ne prend plus en charge l'objet document.body.scrollX
Nous devons donc ajouter un phrase;

Copier le code Le code est le suivant :
if (document.body && document .body.scrollTop &&document.body.scrollLeft)
{
top=document.body.scrollTop
left=document.body.scrollleft
}
if (document.documentElement && document; .documentElement.scrollTop&& document.documentElement.scrollLeft)
{
top=document.documentElement.scrollTop;
left=document.documentElement.scrollLeft
}

Le Ce qui suit décrit l'utilisation de certains paramètres :
Visibilité des pages Web Largeur de la zone : document.body.clientWidth;
Hauteur de la zone visible de la page Web : document.body.clientHeight
Largeur de la zone visible du Web ; page : document.body.offsetWidth ; (y compris la largeur du bord) ;
Hauteur de la zone Web visible : document.body.offsetHeight ; (y compris la largeur du bord) ;
Largeur du texte intégral du Web ; corps de la page : document.body.scrollWidth ;
Hauteur du texte intégral du corps de la page Web : document.body.scrollHeight ;
La page Web défile Haut : document.body.scrollTop
Gauche du Web ; page en cours de défilement : document.body.scrollLeft;
Haut du corps de la page Web : windows.screenTop
Gauche du corps de la page Web : windows.screenLeft ; .screen.height;
Largeur de résolution d'écran : windows.screen.widht;
Hauteur de l'espace de travail disponible : windows.screen.availHeight
Largeur de la zone de travail disponible : windows.screen.availWidth ; Obtenez la hauteur de défilement de l'objet : scrollHeight;
Définissez ou obtenez la distance entre le bord gauche de l'objet et l'extrémité la plus à gauche du contenu actuellement visible dans la fenêtre : scrollLeft; haut de l'objet et haut du contenu visible dans la fenêtre : scrollTop;
Récupère la largeur de défilement de l'objet : scrollWidth;
Récupère l'objet par rapport à la mise en page ou spécifié par les coordonnées parent : attribut offsetParent. hauteur de la coordonnée parent : offsetHeight;
Obtenez la position gauche calculée de l'objet par rapport à la mise en page ou la coordonnée parent spécifiée par la propriété offsetParent : offsetLeft;
Obtenez la position supérieure calculée de l'objet par rapport à la mise en page. ou la coordonnée parent spécifiée par la propriété offsetTop Position : offsetTop;
event.clientX : coordonnée horizontale par rapport au document
event.clientY : coordonnée verticale par rapport au document ; par rapport au conteneur ;
event .offsetY : La coordonnée verticale par rapport au conteneur ;
document.documentElement.scrollTop : Définit la hauteur verticale du défilement
event.clientX document.documentElement.scrollTop : La verticale quantité de défilement par rapport à la position horizontale du document ;
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn