Je charge des éléments via AJAX. Certains d'entre eux ne sont visibles que si vous faites défiler la page.
Existe-t-il un moyen de savoir si un élément se trouve maintenant dans la partie visible de la page?

Cela devrait faire l'affaire:

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

Fonction utilitaire simple Cela vous permettra d'appeler une fonction utilitaire qui accepte l'élément que vous recherchez et si vous souhaitez que l'élément soit entièrement visible ou partiellement.

function Utils() {

}

Utils.prototype = {
    constructor: Utils,
    isElementInView: function (element, fullyInView) {
        var pageTop = $(window).scrollTop();
        var pageBottom = pageTop + $(window).height();
        var elementTop = $(element).offset().top;
        var elementBottom = elementTop + $(element).height();

        if (fullyInView === true) {
            return ((pageTop < elementTop) && (pageBottom > elementBottom));
        } else {
            return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
        }
    }
};

var Utils = new Utils();

Usage

var isElementInView = Utils.isElementInView($('#flyout-left-container'), false);

if (isElementInView) {
    console.log('in view');
} else {
    console.log('out of view');
}

Cette réponse à la vanille:

function isScrolledIntoView(el) {
    var rect = el.getBoundingClientRect();
    var elemTop = rect.top;
    var elemBottom = rect.bottom;

    // Only completely visible elements return true:
    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    // Partially visible elements return true:
    //isVisible = elemTop < window.innerHeight && elemBottom >= 0;
    return isVisible;
}

Mise à jour: utilisez IntersectionObserver

La meilleure méthode que j'ai trouvée jusqu'à présent est le plugin jQuery appear . Fonctionne comme un charme.

Imite un événement "d'apparition" personnalisé, qui se déclenche lorsqu'un élément défile dans la vue ou devient visible par l'utilisateur.

$('#foo').appear(function() {
  $(this).text('Hello world');
});

Ce plugin peut être utilisé pour éviter les demandes inutiles de contenu caché ou en dehors de la zone visible.

Voici ma solution JavaScript pure qui fonctionne si elle est également cachée dans un conteneur défilant.

Démo ici (essayez aussi de redimensionner la fenêtre)

var visibleY = function(el){
  var rect = el.getBoundingClientRect(), top = rect.top, height = rect.height, 
    el = el.parentNode
  // Check if bottom of the element is off the page
  if (rect.bottom < 0) return false
  // Check its within the document viewport
  if (top > document.documentElement.clientHeight) return false
  do {
    rect = el.getBoundingClientRect()
    if (top <= rect.bottom === false) return false
    // Check if the element is out of view due to a container scrolling
    if ((top + height) <= rect.top) return false
    el = el.parentNode
  } while (el != document.body)
  return true
};

EDIT 2016-03-26: J'ai mis à jour la solution pour tenir compte du défilement au-delà de l'élément afin qu'il soit masqué au-dessus du haut du conteneur à défilement. EDIT 2018-10-08: mis à jour pour gérer le défilement hors de la vue au-dessus de l'écran.

Utilisation de l' API IntersectionObserver (native dans les navigateurs modernes)

Il est facile et efficace de déterminer si un élément est visible dans la fenêtre de visualisation, ou dans n'importe quel conteneur déroulant, en utilisant un observateur .

La nécessité d'attacher un scrollévénement et de vérifier manuellement le rappel de l'événement est éliminée, d'où l'efficacité:

// this is the target which is observed
var target = document.querySelector('div');

// configure the intersection observer instance
var intersectionObserverOptions = {
  root: null,
  rootMargin: '150px',
  threshold: 1.0
}
    
var observer = new IntersectionObserver(onIntersection, intersectionObserverOptions);

// provide the observer with a target
observer.observe(target);

function onIntersection(entries){
  entries.forEach(entry => {
    console.clear();
    console.log(entry.intersectionRatio)
    target.classList.toggle('visible', entry.intersectionRatio > 0);
    
    // Are we in viewport?
    if (entry.intersectionRatio > 0) {
      // Stop watching 
      // observer.unobserve(entry.target);
    }
  });
}

.box{ width:100px; height:100px; background:red; margin:1000px; }
.box.visible{ background:green; }

Scroll both Vertically & Horizontally...
<div class='box'></div>

Afficher le tableau de prise en charge des navigateurs (non pris en charge dans IE / Safari)

Le plugin jQuery Waypoints est très bien ici.

$('.entry').waypoint(function() {
   alert('You have scrolled to an entry.');
});

Il y a quelques exemples sur le site du plugin .

Que diriez-vous

function isInView(elem){
   return $(elem).offset().top - $(window).scrollTop() < $(elem).height() ;
}

Après cela, vous pouvez déclencher ce que vous voulez une fois que l'élément est en vue comme celui-ci

$(window).scroll(function(){
   if (isInView($('.classOfDivToCheck')))
      //fire whatever you what 
      dothis();
})

Cela fonctionne très bien pour moi

Tweeked la fonction cool de Scott Dowding pour mes besoins - ceci est utilisé pour trouver si l'élément vient de défiler dans l'écran, c'est-à-dire son bord supérieur.

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

WebResourcesDepot a écrit un script à charger lors du défilement qui utilise jQuery il y a quelque temps. Vous pouvez voir leur démo en direct ici . Le bœuf de leur fonctionnalité était le suivant:

$(window).scroll(function(){
  if  ($(window).scrollTop() == $(document).height() - $(window).height()){
    lastAddedLiveFunc();
  }
});

function lastAddedLiveFunc() { 
  $('div#lastPostsLoader').html('<img src="images/bigLoader.gif">');
  $.post("default.asp?action=getLastPosts&lastPostID="+$(".wrdLatest:last").attr("id"),
    function(data){
        if (data != "") {
          $(".wrdLatest:last").after(data);         
        }
      $('div#lastPostsLoader').empty();
    });
};

Vanille simple pour vérifier si element ( el) est visible dans div ( holder) défilant

function isElementVisible (el, holder) {
  holder = holder || document.body
  const { top, bottom, height } = el.getBoundingClientRect()
  const holderRect = holder.getBoundingClientRect()

  return top <= holderRect.top
    ? holderRect.top - top <= height
    : bottom - holderRect.bottom <= height
},

Utilisation avec jQuery:

var el = $('tr:last').get(0);
var holder = $('table').get(0);
isVisible =  isScrolledIntoView(el, holder);

isScrolledIntoView est une fonction très nécessaire, donc je l'ai essayée, elle fonctionne pour des éléments pas plus élevés que la fenêtre, mais si l'élément est plus grand que la fenêtre, cela ne fonctionne pas. Pour résoudre ce problème, modifiez facilement la condition

return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));

pour ça:

return (docViewBottom >= elemTop && docViewTop <= elemBottom);

Voir la démo ici: http://jsfiddle.net/RRSmQ/

La plupart des réponses ici ne prennent pas en compte le fait qu'un élément peut également être masqué car il défile hors de la vue d'un div, pas seulement de la page entière.

Pour couvrir cette possibilité, vous devez essentiellement vérifier si l'élément est positionné à l'intérieur des limites de chacun de ses parents.

Cette solution fait exactement cela:

function(element, percentX, percentY){
    var tolerance = 0.01;   //needed because the rects returned by getBoundingClientRect provide the position up to 10 decimals
    if(percentX == null){
        percentX = 100;
    }
    if(percentY == null){
        percentY = 100;
    }

    var elementRect = element.getBoundingClientRect();
    var parentRects = [];

    while(element.parentElement != null){
        parentRects.push(element.parentElement.getBoundingClientRect());
        element = element.parentElement;
    }

    var visibleInAllParents = parentRects.every(function(parentRect){
        var visiblePixelX = Math.min(elementRect.right, parentRect.right) - Math.max(elementRect.left, parentRect.left);
        var visiblePixelY = Math.min(elementRect.bottom, parentRect.bottom) - Math.max(elementRect.top, parentRect.top);
        var visiblePercentageX = visiblePixelX / elementRect.width * 100;
        var visiblePercentageY = visiblePixelY / elementRect.height * 100;
        return visiblePercentageX + tolerance > percentX && visiblePercentageY + tolerance > percentY;
    });
    return visibleInAllParents;
};

Il vous permet également de spécifier à quel pourcentage il doit être visible dans chaque direction.
Il ne couvre pas la possibilité qu'il puisse être caché en raison d'autres facteurs, comme display: hidden.

Cela devrait fonctionner dans tous les principaux navigateurs, car il n'utilise que getBoundingClientRect. Je l'ai personnellement testé dans Chrome et Internet Explorer 11.

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop(),
        docViewBottom = docViewTop + $(window).height(),
        elemTop = $(elem).offset().top,
     elemBottom = elemTop + $(elem).height();
   //Is more than half of the element visible
   return ((elemTop + ((elemBottom - elemTop)/2)) >= docViewTop && ((elemTop + ((elemBottom - elemTop)/2)) <= docViewBottom));
}

Voici une autre solution de http://web-profile.com.ua/

<script type="text/javascript">
$.fn.is_on_screen = function(){
    var win = $(window);
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right ||    viewport.bottom < bounds.top || viewport.top > bounds.bottom));
 };

if( $('.target').length > 0 ) { // if target element exists in DOM
    if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
        $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info       
    } else {
        $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
    }
}
$(window).scroll(function(){ // bind window scroll event
if( $('.target').length > 0 ) { // if target element exists in DOM
    if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
        $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info
    } else {
        $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
    }
}
});
</script>

Voir dans JSFiddle

Cela prend en compte le remplissage, la bordure ou la marge de l'élément ainsi que les éléments plus grands que la fenêtre elle-même.

function inViewport($ele) {
    var lBound = $(window).scrollTop(),
        uBound = lBound + $(window).height(),
        top = $ele.offset().top,
        bottom = top + $ele.outerHeight(true);

    return (top > lBound && top < uBound)
        || (bottom > lBound && bottom < uBound)
        || (lBound >= top && lBound <= bottom)
        || (uBound >= top && uBound <= bottom);
}

Pour l'appeler, utilisez quelque chose comme ceci:

var $myElement = $('#my-element'),
    canUserSeeIt = inViewport($myElement);

console.log(canUserSeeIt); // true, if element is visible; false otherwise

Il existe un plugin pour jQuery appelé inview qui ajoute un nouvel événement "inview".

Voici du code pour un plugin jQuery qui n'utilise pas d'événements:

$.extend($.expr[':'],{
    inView: function(a) {
        var st = (document.documentElement.scrollTop || document.body.scrollTop),
            ot = $(a).offset().top,
            wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height();
        return ot > st && ($(a).height() + ot) < (st + wh);
    }
});

(function( $ ) {
    $.fn.inView = function() {
        var st = (document.documentElement.scrollTop || document.body.scrollTop),
        ot = $(this).offset().top,
        wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height();

        return ot > st && ($(this).height() + ot) < (st + wh);
    };
})( jQuery );

J'ai trouvé cela dans un commentaire ici ( http://remysharp.com/2009/01/26/element-in-view-event-plugin/ ) par un mec appelé James

Je devais vérifier la visibilité dans les éléments à l'intérieur du conteneur DIV déroulant

    //p = DIV container scrollable
    //e = element
    function visible_in_container(p, e) {
        var z = p.getBoundingClientRect();
        var r = e.getBoundingClientRect();

        // Check style visiblilty and off-limits
        return e.style.opacity > 0 && e.style.display !== 'none' &&
               e.style.visibility !== 'hidden' &&
               !(r.top > z.bottom || r.bottom < z.top ||
                 r.left > z.right || r.right < z.left);
    }

À partir de cette excellente réponse , vous pouvez la simplifier un peu plus en utilisant ES2015 +:

function isScrolledIntoView(el) {
  const { top, bottom } = el.getBoundingClientRect()
  return top >= 0 && bottom <= window.innerHeight
}

Si vous ne vous souciez pas du haut qui sort de la fenêtre et que vous vous souciez simplement que le bas a été vu, cela peut être simplifié pour

function isSeen(el) {
  return el.getBoundingClientRect().bottom <= window.innerHeight
}

ou même le one-liner

const isSeen = el => el.getBoundingClientRect().bottom <= window.innerHeight

Vous pouvez utiliser le plugin jquery "onScreen" pour vérifier si l'élément est dans la fenêtre courante lorsque vous faites défiler. Le plugin définit le ": onScreen" du sélecteur sur true lorsque le sélecteur apparaît à l'écran. Il s'agit du lien du plugin que vous pouvez inclure dans votre projet. " http://benpickles.github.io/onScreen/jquery.onscreen.min.js "

Vous pouvez essayer l'exemple ci-dessous qui fonctionne pour moi.

$(document).scroll(function() {
    if($("#div2").is(':onScreen')) {
        console.log("Element appeared on Screen");
        //do all your stuffs here when element is visible.
    }
    else {
        console.log("Element not on Screen");
        //do all your stuffs here when element is not visible.
    }
});

Code HTML:

<div id="div1" style="width: 400px; height: 1000px; padding-top: 20px; position: relative; top: 45px"></div> <br>
<hr /> <br>
<div id="div2" style="width: 400px; height: 200px"></div>

CSS:

#div1 {
    background-color: red;
}
#div2 {
    background-color: green;
}

J'ai une telle méthode dans mon application, mais elle n'utilise pas jQuery:

/* Get the TOP position of a given element. */
function getPositionTop(element){
    var offset = 0;
    while(element) {
        offset += element["offsetTop"];
        element = element.offsetParent;
    }
    return offset;
}

/* Is a given element is visible or not? */
function isElementVisible(eltId) {
    var elt = document.getElementById(eltId);
    if (!elt) {
        // Element not found.
        return false;
    }
    // Get the top and bottom position of the given element.
    var posTop = getPositionTop(elt);
    var posBottom = posTop + elt.offsetHeight;
    // Get the top and bottom position of the *visible* part of the window.
    var visibleTop = document.body.scrollTop;
    var visibleBottom = visibleTop + document.documentElement.offsetHeight;
    return ((posBottom >= visibleTop) && (posTop <= visibleBottom));
}

Edit: Cette méthode fonctionne bien pour IE (au moins la version 6). Lisez les commentaires pour la compatibilité avec FF.

Si vous souhaitez modifier cela pour faire défiler l'élément dans une autre div,

function isScrolledIntoView (elem, divID) 

{

    var docViewTop = $('#' + divID).scrollTop();


    var docViewBottom = docViewTop + $('#' + divID).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
}

Modification de la réponse acceptée afin que l'élément ait sa propriété d'affichage définie sur autre chose que «aucun» pour que la qualité soit visible.

function isScrolledIntoView(elem) {
   var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();
  var elemDisplayNotNone = $(elem).css("display") !== "none";

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && elemDisplayNotNone);
}

Voici un moyen de réaliser la même chose en utilisant Mootools, en horizontal, vertical ou les deux.

Element.implement({
inVerticalView: function (full) {
    if (typeOf(full) === "null") {
        full = true;
    }

    if (this.getStyle('display') === 'none') {
        return false;
    }

    // Window Size and Scroll
    var windowScroll = window.getScroll();
    var windowSize = window.getSize();
    // Element Size and Scroll
    var elementPosition = this.getPosition();
    var elementSize = this.getSize();

    // Calculation Variables
    var docViewTop = windowScroll.y;
    var docViewBottom = docViewTop + windowSize.y;
    var elemTop = elementPosition.y;
    var elemBottom = elemTop + elementSize.y;

    if (full) {
        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
            && (elemBottom <= docViewBottom) && (elemTop >= docViewTop) );
    } else {
        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }
},
inHorizontalView: function(full) {
    if (typeOf(full) === "null") {
        full = true;
    }

    if (this.getStyle('display') === 'none') {
        return false;
    }

    // Window Size and Scroll
    var windowScroll = window.getScroll();
    var windowSize = window.getSize();
    // Element Size and Scroll
    var elementPosition = this.getPosition();
    var elementSize = this.getSize();

    // Calculation Variables
    var docViewLeft = windowScroll.x;
    var docViewRight = docViewLeft + windowSize.x;
    var elemLeft = elementPosition.x;
    var elemRight = elemLeft + elementSize.x;

    if (full) {
        return ((elemRight >= docViewLeft) && (elemLeft <= docViewRight)
            && (elemRight <= docViewRight) && (elemLeft >= docViewLeft) );
    } else {
        return ((elemRight <= docViewRight) && (elemLeft >= docViewLeft));
    }
},
inView: function(full) {
    return this.inHorizontalView(full) && this.inVerticalView(full);
}});

Un exemple basé sur cette réponse pour vérifier si un élément est visible à 75% (c'est-à-dire que moins de 25% de celui-ci est hors de l'écran).

function isScrolledIntoView(el) {
  // check for 75% visible
  var percentVisible = 0.75;
  var elemTop = el.getBoundingClientRect().top;
  var elemBottom = el.getBoundingClientRect().bottom;
  var elemHeight = el.getBoundingClientRect().height;
  var overhang = elemHeight * (1 - percentVisible);

  var isVisible = (elemTop >= -overhang) && (elemBottom <= window.innerHeight + overhang);
  return isVisible;
}

Il y a plus de 30 réponses à cette question, et aucune d'entre elles n'utilise la solution JS incroyablement simple et pure que j'utilise. Il n'est pas nécessaire de charger jQuery juste pour résoudre ce problème, car beaucoup d'autres poussent.

Afin de savoir si l'élément se trouve dans la fenêtre, nous devons d'abord déterminer la position des éléments dans le corps. Nous n'avons pas besoin de le faire récursivement comme je le pensais autrefois. Au lieu de cela, nous pouvons utiliser element.getBoundingClientRect().

pos = elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top;

Cette valeur est la différence Y entre le haut de l'objet et le haut du corps.

Nous devons alors dire si l'élément est en vue. La plupart des implémentations demandent si l'élément complet se trouve dans la fenêtre d'affichage, c'est donc ce que nous allons couvrir.

Tout d' abord, la position de haut de la fenêtre est: window.scrollY.

Nous pouvons obtenir la position inférieure de la fenêtre en ajoutant la hauteur de la fenêtre à sa position supérieure:

var window_bottom_position = window.scrollY + window.innerHeight;

Permet de créer une fonction simple pour obtenir la position supérieure de l'élément:

function getElementWindowTop(elem){
    return elem && typeof elem.getBoundingClientRect === 'function' ? elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top : 0;
}

Cette fonction renverra la position supérieure de l'élément dans la fenêtre ou elle reviendra 0si vous lui passez autre chose qu'un élément avec la .getBoundingClientRect()méthode. Cette méthode existe depuis longtemps, vous ne devriez donc pas avoir à vous soucier que votre navigateur ne la supporte pas.

Maintenant, la première position de notre élément est:

var element_top_position = getElementWindowTop(element);

Et la position inférieure de l'élément ou est:

var element_bottom_position = element_top_position + element.clientHeight;

Nous pouvons maintenant déterminer si l'élément se trouve dans la fenêtre en vérifiant si la position inférieure de l'élément est inférieure à la position supérieure de la fenêtre et en vérifiant si la position supérieure de l'élément est supérieure à la position inférieure de la fenêtre:

if(element_bottom_position >= window.scrollY 
&& element_top_position <= window_bottom_position){
    //element is in view
else
    //element is not in view

De là, vous pouvez effectuer la logique pour ajouter ou supprimer une in-viewclasse sur votre élément, que vous pourrez ensuite gérer plus tard avec des effets de transition dans votre CSS.

Je suis absolument étonné de ne pas avoir trouvé cette solution ailleurs, mais je pense que c'est la solution la plus propre et la plus efficace, et elle ne vous oblige pas à charger jQuery!

Une version plus efficace de cette réponse :

 /**
 * Is element within visible region of a scrollable container
 * @param {HTMLElement} el - element to test
 * @returns {boolean} true if within visible region, otherwise false
 */
 function isScrolledIntoView(el) {
      var rect = el.getBoundingClientRect();
      return (rect.top >= 0) && (rect.bottom <= window.innerHeight);
 }

Cette méthode renvoie true si une partie de l'élément est visible sur la page. Cela a mieux fonctionné dans mon cas et peut aider quelqu'un d'autre.

function isOnScreen(element) {
  var elementOffsetTop = element.offset().top;
  var elementHeight = element.height();

  var screenScrollTop = $(window).scrollTop();
  var screenHeight = $(window).height();

  var scrollIsAboveElement = elementOffsetTop + elementHeight - screenScrollTop >= 0;
  var elementIsVisibleOnScreen = screenScrollTop + screenHeight - elementOffsetTop >= 0;

  return scrollIsAboveElement && elementIsVisibleOnScreen;
}

Modification simple pour div défilable (conteneur)

var isScrolledIntoView = function(elem, container) {
    var containerHeight = $(container).height();
    var elemTop = $(elem).position().top;
    var elemBottom = elemTop + $(elem).height();
    return (elemBottom > 0 && elemTop < containerHeight);
}

REMARQUE: cela ne fonctionne pas si l'élément est plus grand que la div défilable.

J'ai adapté cette courte extension de fonction jQuery, que vous pouvez utiliser librement (licence MIT).

/**
 * returns true if an element is visible, with decent performance
 * @param [scope] scope of the render-window instance; default: window
 * @returns {boolean}
 */
jQuery.fn.isOnScreen = function(scope){
    var element = this;
    if(!element){
        return;
    }
    var target = $(element);
    if(target.is(':visible') == false){
        return false;
    }
    scope = $(scope || window);
    var top = scope.scrollTop();
    var bot = top + scope.height();
    var elTop = target.offset().top;
    var elBot = elTop + target.height();

    return ((elBot <= bot) && (elTop >= top));
};

J'ai écrit un composant pour la tâche, conçu pour gérer un grand nombre d'éléments extrêmement rapidement (à hauteur de <10 ms pour 1000 éléments sur un mobile lent ).

Il fonctionne avec tous les types de conteneurs de défilement auxquels vous avez accès - fenêtre, éléments HTML, iframe intégré, fenêtre enfant générée - et est très flexible dans ce qu'il détecte ( visibilité complète ou partielle , zone de bordure ou zone de contenu , zone de tolérance personnalisée , etc. ).

Une énorme suite de tests, principalement générée automatiquement, garantit qu'elle fonctionne comme un navigateur croisé annoncé .

Essayez-le si vous le souhaitez: jQuery.isInView . Sinon, vous pourriez trouver l'inspiration dans le code source, par exemple ici .