Question Vérifier si l'élément est visible après le défilement


Je charge des éléments via AJAX. Certains d'entre eux ne sont visibles que si vous faites défiler la page.
Est-ce que je peux savoir si un élément est maintenant dans la partie visible de la page?


976
2018-01-28 10:00


origine


Réponses:


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 d'utilitaire simple Cela vous permettra d'appeler une fonction utilitaire qui accepte l'élément que vous recherchez et si vous voulez 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');
}

1133
2018-01-28 15:36



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;
}

296
2018-03-18 13:31



La meilleure méthode que j'ai trouvée jusqu'ici est la jQuery apparaît plugin. Fonctionne comme un charme.

Imite un événement "apparaitre" personnalisé, qui se déclenche quand 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.


113
2017-08-20 21:31



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

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

var visibleY = function(el){
  var rect = el.getBoundingClientRect(), top = rect.top, height = rect.height, 
    el = el.parentNode;
  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);
  // Check its within the document viewport
  return top <= document.documentElement.clientHeight;
};

EDIT 2016-03-26: J'ai mis à jour la solution pour tenir compte du défilement de l'élément afin qu'il soit caché au-dessus du conteneur scroll-able.


65
2018-02-07 12:02



Le plugin jQuery Waypoints va très bien ici.

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

Il y a quelques exemples sur le site du plugin.


40
2017-12-04 12:08



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 boeuf de leur fonctionnalité était ceci:

$(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();
    });
};

14
2018-01-28 14:14



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 ça

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

Cela fonctionne très bien pour moi


14
2018-04-29 10:24



La fonction cool de Scott Dowding a doublé pour mes besoins Ceci est utilisé pour trouver si l'élément a juste défilé dans l'écran, c'est le 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));
}

12
2018-04-30 16:08



isScrolledIntoView est une fonction très nécessaire, donc je l'ai essayé, cela fonctionne pour des éléments pas plus élevés que la fenêtre d'affichage, mais si l'élément est plus grand que la fenêtre, cela ne fonctionne pas. Pour réparer cela facilement changer la condition

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

pour ça:

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

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


6
2017-10-23 17:30



Ceci prend en compte tout padding, bordure ou marge que l'élément possède 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

6
2017-12-30 01:54