web-dev-qa-db-fra.com

Comment vérifier si un élément est dans la vue de l'utilisateur avec jquery

J'ai une très grande div glissable dans ma fenêtre. Cette div a une fenêtre plus petite.

<div id="draggable-area" style="width:500px;height:500px;overflow:hidden">
 <div id="draggable" style="width:5000px;height:5000px">
     <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         ....
     </ul>
  </div>
</div>

Comment savoir si l'élément li est visible dans la fenêtre de l'utilisateur (je veux dire vraiment visible, pas dans la zone de débordement)?

javascriptjqueryviewport
18
Sebastien

regardez ce plugin

Il vous donne la possibilité de faire les sélecteurs suivants

$(":in-viewport")
$(":below-the-fold")
$(":above-the-top")
$(":left-of-screen")
$(":right-of-screen")
23
Manuel van Rijn

Pour vérifier si un élément est dans la fenêtre actuelle:

function elementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top >= window.pageYOffset &&
    left >= window.pageXOffset &&
    (top + height) <= (window.pageYOffset + window.innerHeight) &&
    (left + width) <= (window.pageXOffset + window.innerWidth)
  );
}

( La source )

Pour une méthode plus robuste, je recommanderais Viewport Selectors , qui vous permet simplement de faire:

$("#elem:in-viewport")
24
Alex Peattie

https://github.com/sakabako/scrollMonitor

var scrollMonitor = require("./scrollMonitor"); // if you're not using require, you can use the scrollMonitor global.
var myElement = document.getElementById("itemToWatch");

var elementWatcher = scrollMonitor.create( myElement );

elementWatcher.enterViewport(function() {
    console.log( 'I have entered the viewport' );
});
elementWatcher.exitViewport(function() {
    console.log( 'I have left the viewport' );
});

elementWatcher.isInViewport - true if any part of the element is visible, false if not.
elementWatcher.isFullyInViewport - true if the entire element is visible [1].
elementWatcher.isAboveViewport - true if any part of the element is above the viewport.
elementWatcher.isBelowViewport - true if any part of the element is below the viewport.
1
trushkevich

J'utilise (vérifie si un élément est au moins partiellement dans la vue) le code suivant: 

var winSize;

function getWindowSize() {
            var winW,WinH = 0;
            if (document.body && document.body.offsetWidth) {
                winW = document.body.offsetWidth;
                winH = document.body.offsetHeight;
            }
            if (document.compatMode == 'CSS1Compat' &&
                document.documentElement &&
                document.documentElement.offsetWidth) {
                winW = document.documentElement.offsetWidth;
                winH = document.documentElement.offsetHeight;
            }
            if (window.innerWidth && window.innerHeight) {
                winW = window.innerWidth;
                winH = window.innerHeight;
            }
            return {w:winW, h:winH};
        }

winSize = getWindowSize();    

function inView(element) {
                var box = element.getBoundingClientRect();
                if ((box.bottom < 0) || (box.top > winSize.h)){
                    return false;
                }
                return true;
            }
0
Lumic

Ma solution utilise l'exemple de code donné, et elle vous montrera une idée générale de la façon de déterminer si l'élément li est visible. Découvrez le jsFiddle qui contient le code de votre question.

La méthode jQuery .offset () nous permet de récupérer la position actuelle d’un élément par rapport au document. Si vous cliquez sur un élément li à l'intérieur du glissable, votre décalage par rapport au sommet sera compris entre 0 et 500 et le décalage par rapport à gauche devrait être compris entre 0 et 500. Si vous appelez la fonction de décalage d'un élément non visible, le décalage sera inférieur à 0 ou supérieur à 500 par rapport au décalage supérieur ou gauche.

Si ce n'est pas une tâche ardue, j'aime toujours coder ce dont j'ai besoin depuis 'scrath', cela me donne plus de flexibilité pour modifier ou déboguer. C'est pourquoi je vous recommanderais d'envisager d'utiliser la fonction offset de jQuery plutôt que d'utiliser un plugin. Si ce que vous essayez d'accomplir est assez simple, utiliser votre propre fonction vous donnera une bibliothèque de moins à charger.

0
Jose Vega