Comment déterminer si un élément se trouve dans la zone d'affichage dans jquery

Lors du développement de pages Web, nous devons souvent manipuler des éléments DOM. Pour opérer sur un élément, vous devez d'abord déterminer si l'élément se trouve dans la zone d'affichage. Dans une page Web, de nombreux éléments peuvent être masqués et ne pas se trouver dans la zone d'affichage. Par conséquent, avant d'utiliser ces éléments, vous devez déterminer s'ils se trouvent dans la zone d'affichage pour éviter d'utiliser des éléments inutiles et améliorer les performances de la page.

jQuery fournit quelques méthodes pour déterminer si un élément se trouve dans la zone d'affichage. Ci-dessous, nous présenterons ces méthodes en détail, y compris les méthodes de jugement basées sur les fenêtres, les documents et les éléments.

Méthode de jugement basée sur la fenêtre d'affichage

Dans une page Web, nous pouvons utiliser la fenêtre d'affichage (Viewport) pour juger si un élément se trouve dans la zone d'affichage. La fenêtre d'affichage est la zone de la page actuellement visible par l'utilisateur, qui peut être obtenue via les propriétés de l'objet fenêtre.

jQuery fournit quelques méthodes pour déterminer si un élément se trouve dans la fenêtre d'affichage, notamment :

1. $(window).height() : obtient la hauteur de la fenêtre d'affichage actuelle.
2. $(window).scrollTop() : Obtient la distance entre le haut de la fenêtre actuelle et le haut du document (c'est-à-dire la distance de défilement de la barre de défilement).

Grâce aux deux méthodes ci-dessus, nous pouvons obtenir la position supérieure et la position inférieure de la fenêtre actuelle. Pour un élément, si sa position supérieure est inférieure à la position inférieure actuelle de la fenêtre et que sa position inférieure est supérieure à la position supérieure actuelle de la fenêtre, alors il se trouve dans la zone d'affichage.

Sur la base des principes ci-dessus, nous pouvons utiliser du code pour implémenter la fonction permettant de déterminer si un élément se trouve dans la fenêtre d'affichage :

function isInViewport(elem) {
    var elemTop = elem.offset().top;
    var elemBottom = elemTop + elem.height();
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    return elemTop < viewportBottom && elemBottom > viewportTop;
}

// 使用方式
var element = $('#my-element');
if (isInViewport(element)) {
    // 元素在视口内
} else {
    // 元素不在视口内
}

Dans le code ci-dessus, la fonction isInViewport() reçoit un objet élément jQuery et obtient la position de l'élément sur la page et la position actuelle de la fenêtre, détermine si l'élément se trouve dans la zone d'affichage et renvoie une valeur booléenne.

Méthode de jugement basée sur le document

Lorsque le contenu de la page dépasse la taille de la fenêtre d'affichage, la taille de la fenêtre d'affichage ne reflète plus avec précision le contenu de la page. À ce stade, il est nécessaire de juger si l'élément se trouve dans la zone d'affichage en fonction. le document. La méthode de jugement basée sur le document doit obtenir la distance de l'élément par rapport au haut du document et la hauteur du document pour déterminer si un élément se trouve dans la zone visible du document.

jQuery fournit les méthodes suivantes pour obtenir la position de l'élément dans le document et la hauteur du document :

1. $(document).height() : Obtenez la hauteur du document.
2. elem.offset().top : Obtient la distance de l'élément par rapport au haut du document.

En utilisant les deux méthodes ci-dessus, nous pouvons obtenir la position supérieure de l'élément et la hauteur du document pour déterminer si l'élément se trouve dans la zone visible du document. Ce qui suit est une fonction qui détermine si un élément se trouve dans la zone visible du document :

function isElementInDocumentViewport(elem) {
    var elemTop = elem.offset().top;
    var elemBottom = elemTop + elem.height();
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var docHeight = $(document).height();
    return elemTop < docViewBottom && elemBottom > docViewTop && elemTop > 0 && elemBottom < docHeight;
}

// 使用方式
var element = $(&#39;#my-element&#39;);
if (isElementInDocumentViewport(element)) {
    // 元素在可视区域内
} else {
    // 元素不在可视区域内
}

Dans le code ci-dessus, la fonction isElementInDocumentViewport() détermine si un élément se trouve dans la zone visible du document, et la fonction renvoie une valeur booléenne. elemTop et elemBottom représentent respectivement la distance entre le haut et le bas de l'élément par rapport au haut du document, docViewTop et docViewBottom représentent respectivement la distance entre le haut et le bas du document par rapport au haut de la fenêtre, et docHeight représente le hauteur du document.

Méthode de jugement basée sur les éléments

Parfois, lorsque nous jugeons si un élément se trouve dans la zone d'affichage, nous nous soucions uniquement de la situation au sein d'un certain élément parent. À ce stade, nous pouvons utiliser la méthode de jugement basée sur les éléments pour obtenir la hauteur de l'élément parent et la position de la barre de défilement afin de déterminer si l'élément se trouve dans la zone visible de l'élément parent.

Ce qui suit est une fonction qui détermine si un élément se trouve dans la zone visible de l'élément parent :

function isElementInElementViewport(elem, parentElem) {
    var elemTop = elem.offset().top - parentElem.offset().top;
    var elemBottom = elemTop + elem.height();
    var parentViewTop = parentElem.scrollTop();
    var parentViewBottom = parentViewTop + parentElem.height();
    var parentHeight = parentElem.height();
    return elemTop < parentViewBottom && elemBottom > parentViewTop && elemTop > 0 && elemBottom < parentHeight;
}

// 使用方式
var element = $('#my-element');
var parentElement = $('#my-parent-element');
if (isElementInElementViewport(element, parentElement)) {
    // 元素在父元素可视区域内
} else {
    // 元素不在父元素可视区域内
}

Dans le code ci-dessus, la fonction isElementInElementViewport() reçoit deux objets élément jQuery, qui sont l'élément qui doit être déterminé et son élément parent. La fonction renvoie une valeur booléenne. elemTop et elemBottom représentent respectivement la distance entre le haut et le bas de l'élément par rapport au haut de l'élément parent. parentViewTop et parentViewBottom représentent respectivement la distance entre le haut et le bas de l'élément parent par rapport au haut de la barre de défilement. représente la hauteur de l'élément parent.

Conclusion

Dans le développement Web, déterminer si un élément se trouve dans la zone d'affichage est une fonction basique et importante. Lorsque vous utilisez jQuery pour exploiter des éléments DOM, nous pouvons utiliser les méthodes fournies par jQuery pour déterminer si l'élément se trouve dans la zone visible de la fenêtre, du document ou de l'élément parent. En utilisant ces méthodes de manière rationnelle, nous pouvons améliorer les performances des pages et éviter des opérations inutiles.

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!