Wie kann man prüfen, ob ein Element nach dem Scrollen sichtbar ist?

Question

Ich lade Elemente über AJAX. Einige von ihnen sind nur sichtbar, wenn Sie die Seite nach unten scrollen. Gibt es eine Möglichkeit, wie ich wissen kann, ob ein Element jetzt im sichtbaren Teil der Seite ist?

Answer 1

Einfacher Vanilla, um zu prüfen, ob das Element ( el ) ist in einem scrollbaren Div sichtbar ( holder )

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
}

Verwendung mit jQuery:

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

Answer 2

JQuery Waypoints Plugin geht hier sehr gut.

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

Es gibt einige Beispiele auf der Website Seite des Plugins .

Answer 3

Wie wäre es mit

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

Danach können Sie auslösen, was Sie wollen, sobald das Element in der Ansicht ist, wie folgt

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

Das funktioniert bei mir sehr gut.

Answer 4

Ich habe Scott Dowdings coole Funktion für meine Anforderungen abgeändert. Diese Funktion wird verwendet, um herauszufinden, ob das Element gerade in den Bildschirm gescrollt wurde, d.h. ob es am oberen Rand liegt.

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

Answer 5

WebResourcesDepot schrieb ein Skript, das beim Scrollen geladen wird die die jQuery vor einiger Zeit. Sie können sich ihre Live-Demo hier . Der Grund für ihre Funktionalität war folgender:

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