Vérifier si l'élément est visible sur l'écran [dupliquer]

possibilité de dupliquer:

jQuery-vérifier si l'élément est visible après l'écrouissage

j'essaie de déterminer si un élément est visible à l'écran. Pour ce faire, j'essaie de trouver la position verticale de l'élément en utilisant offsetTop, mais la valeur retournée n'est pas correcte. Dans ce cas, l'élément n'est pas visible, sauf si vous faites défiler vers le bas. Mais, en dépit de ceci, offsetTop retourne une valeur de 618 lorsque la hauteur de mon écran est 703, donc selon offsetTop l'élément devrait être visible.

le code que j'utilise ressemble à ceci:

function posY(obj)
{
  var curtop = 0;

  if( obj.offsetParent )
  {
    while(1)
    {
      curtop += obj.offsetTop;

      if( !obj.offsetParent )
      {
        break;
      }

      obj = obj.offsetParent;
    }
  } else if( obj.y )
    {
     curtop += obj.y;
    }

  return curtop;
}

Merci d'avance!

52
demandé sur Community 2011-03-18 18:11:19

2 réponses

Benm bien déclaré, Vous devez détecter la hauteur du viewport + la position de défilement pour correspondre à votre poisiton supérieur. La fonction que vous utilisez est ok et fait le travail, bien que son Abit plus complexe ath il doit.

si vous n'utilisez pas jQuery alors le script serait quelque chose comme ceci:

function posY(elm) {
    var test = elm, top = 0;

    while(!!test && test.tagName.toLowerCase() !== "body") {
        top += test.offsetTop;
        test = test.offsetParent;
    }

    return top;
}

function viewPortHeight() {
    var de = document.documentElement;

    if(!!window.innerWidth)
    { return window.innerHeight; }
    else if( de && !isNaN(de.clientHeight) )
    { return de.clientHeight; }

    return 0;
}

function scrollY() {
    if( window.pageYOffset ) { return window.pageYOffset; }
    return Math.max(document.documentElement.scrollTop, document.body.scrollTop);
}

function checkvisible( elm ) {
    var vpH = viewPortHeight(), // Viewport Height
        st = scrollY(), // Scroll Top
        y = posY(elm);

    return (y > (vpH + st));
}

L'utilisation de jQuery est beaucoup plus facile:

function checkVisible( elm, evalType ) {
    evalType = evalType || "visible";

    var vpH = $(window).height(), // Viewport Height
        st = $(window).scrollTop(), // Scroll Top
        y = $(elm).offset().top,
        elementHeight = $(elm).height();

    if (evalType === "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
    if (evalType === "above") return ((y < (vpH + st)));
}

cela offre même un second paramètre. Avec "visible" (ou aucun second paramètre) il vérifie strictement si un élément est à l'écran. S'il est réglé sur "haut", il retournera vrai si l'élément en question est sur ou au-dessus de l'écran.

voir en action: http://jsfiddle.net/RJX5N/2 /

j'espère que cela répondra à votre question.

-- VERSION AMÉLIORÉE--

C'est beaucoup plus court et devrait le faire aussi:

function checkVisible(elm) {
  var rect = elm.getBoundingClientRect();
  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}

avec un violon pour le prouver: http://jsfiddle.net/t2L274ty/1 /

et une version avec threshold et mode inclus:

function checkVisible(elm, threshold, mode) {
  threshold = threshold || 0;
  mode = mode || 'visible';

  var rect = elm.getBoundingClientRect();
  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  var above = rect.bottom - threshold < 0;
  var below = rect.top - viewHeight + threshold >= 0;

  return mode === 'above' ? above : (mode === 'below' ? below : !above && !below);
}

et avec un violon pour le prouver: http://jsfiddle.net/t2L274ty/2 /

95
répondu Tokimon 2016-04-07 13:19:34

pourriez-vous utiliser jQuery, puisque c'est compatible avec tous les navigateurs?

function isOnScreen(element)
{
    var curPos = element.offset();
    var curTop = curPos.top;
    var screenHeight = $(window).height();
    return (curTop > screenHeight) ? false : true;
}

et ensuite appeler la fonction en utilisant quelque chose comme:

if(isOnScreen($('#myDivId'))) { /* Code here... */ };
16
répondu BenM 2012-10-24 11:57:22