Frage Überprüfen Sie, ob das Element nach dem Scrollen sichtbar ist


Ich lade Elemente über AJAX. Einige davon sind nur sichtbar, wenn Sie die Seite nach unten scrollen.
Kann ich irgendwie wissen, ob sich ein Element jetzt im sichtbaren Teil der Seite befindet?


976
2018-01-28 10:00


Ursprung


Antworten:


Dies sollte den Trick machen:

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

Einfache Dienstprogrammfunktion Dadurch können Sie eine Dienstprogrammfunktion aufrufen, die das gesuchte Element akzeptiert und wenn das Element vollständig oder teilweise angezeigt werden soll.

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

Verwendung

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



Diese Antwort in 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



Die beste Methode, die ich bisher gefunden habe, ist die jQuery erscheint Plugin. Klappt wunderbar.

Imitiert ein benutzerdefiniertes "Erscheinen" -Ereignis, das ausgelöst wird, wenn ein Element in den Bildlauf hineinrollt oder auf andere Weise für den Benutzer sichtbar wird.

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

Dieses Plugin kann verwendet werden, um unnötige Anfragen nach versteckten Inhalten oder außerhalb des sichtbaren Bereichs zu verhindern.


113
2017-08-20 21:31



Hier ist meine reine JavaScript-Lösung, die funktioniert, wenn sie auch in einem scrollbaren Container versteckt ist.

Demo hier (Versuchen Sie auch, das Fenster zu vergrößern)

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

BEARBEITEN 2016-03-26: Ich habe die Lösung so aktualisiert, dass sie über das Element hinaus blättert, sodass es oberhalb des Scroll-fähigen Containers verborgen ist.


65
2018-02-07 12:02



jQuery Wegpunkte Plugin geht sehr schön hier.

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

Es gibt einige Beispiele auf der Seite des Plugins.


40
2017-12-04 12:08



WebResourcesDepot schrieb ein Skript zum Laden während des Scrollens das benutzt jQuery vor einiger Zeit. Sie können ihre anzeigen Live Demo hier. Das Rindfleisch ihrer Funktionalität war das:

$(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



Wie wäre es mit

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

Danach können Sie auslösen, was auch immer Sie wollen, sobald das Element so angezeigt wird

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

Das funktioniert für mich ganz gut


14
2018-04-29 10:24



Tweeked Scott Dowdings coole Funktion für meine Anforderung- Dies wird verwendet, um zu finden, ob das Element gerade in den Bildschirm gescrollt ist, d. h. es ist die obere Kante.

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



ist ScrolledIntoView ist eine sehr nützliche Funktion, also habe ich es versucht, es funktioniert für Elemente nicht höher als das Ansichtsfenster, aber wenn das Element größer als das Ansichtsfenster ist, funktioniert es nicht. Um dies zu beheben, ändern Sie einfach den Zustand

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

zu diesem:

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

Siehe Demo hier: http://jsfiddle.net/RRSmQ/


6
2017-10-23 17:30