Ta odpowiedź w wanilii:

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

Najlepszą metodą jaką do tej pory znalazłem jest jQuery appear plugin . Działa jak urok.

Naśladuje niestandardowe zdarzenie "appeared", które jest wywoływane, gdy element przewija się do widoku lub w inny sposób staje się widoczny dla użytkownika.

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

Ta wtyczka może być używana do zapobiegania niepotrzebnym żądaniom treści, które są ukryte lub poza obszarem widocznym.

Oto moje czyste rozwiązanie JavaScript, które działa, jeśli jest ukryte w przewijalnym kontenerze.

Demo tutaj (spróbuj zmienić rozmiar okna)

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

edycja 2016-03-26: zaktualizowałem rozwiązanie, aby uwzględniało przewijanie obok elementu, aby był ukryty nad górną częścią kontenera z możliwością przewijania. edycja 2018-10-08: Zaktualizowano obsługę po przewinięciu poza widok nad ekranem.

JQuery Waypoints plugin idzie bardzo ładnie tutaj.

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

Istnieje kilka przykładów na stronie wtyczki .

A może

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

Po tym można uruchomić co chcesz, gdy element jest w widoku w ten sposób

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

That works for me just fine

WebResourcesDepot napisał skrypt do załadowania podczas przewijania , który używa jQuery jakiś czas temu. Możesz zobaczyć ich Demo na żywo tutaj . Ich funkcjonalność była następująca:

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

Tweeked Scott Dowding ' s cool function for my requirements- jest to używane do stwierdzenia, czy element właśnie przewijał się na ekranie, tzn. jest to górna krawędź .

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

IsScrolledIntoView jest bardzo potrzebną funkcją, więc wypróbowałem ją, działa dla elementów nie wyższych niż viewport, ale jeśli element jest większy niż viewport to nie działa. Aby to naprawić łatwo Zmień warunek

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

Do tego:

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

Zobacz demo tutaj: http://jsfiddle.net/RRSmQ/

Uwzględnia to dowolne wypełnienie, obramowanie lub margines elementu, a także elementy większe niż sam widok.

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

Aby to nazwać użyj czegoś takiego:

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

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

Większość odpowiedzi tutaj nie bierze pod uwagę, że element może być również ukryty, ponieważ jest przewijany poza widokiem div, nie tylko całej strony.

Aby pokryć tę możliwość, w zasadzie musisz sprawdzić, czy element jest umieszczony wewnątrz granic każdego z jego rodziców.

To rozwiązanie robi dokładnie to:

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

Pozwala również określić, jaki procent ma być widoczny w każdym kierunku.
Nie obejmuje możliwości, że może być Ukryte z powodu innych czynników, takich jak display: hidden.

To powinno działać we wszystkich głównych przeglądarkach, ponieważ używa tylko getBoundingClientRect. Osobiście Przetestowałem go w Chrome i Internet Explorer 11.

Korzystanie z nowego IntersectionObserver API bardzo łatwo i efektywnie określić, czy element jest widoczny w widoku. Używając obserwatora , eliminuje konieczność dołączania zdarzenia scroll i ręcznego sprawdzania wywołania zwrotnego zdarzenia.

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

// provice 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>

Zobacz tabelę obsługi przeglądarek (nie jest obsługiwana w IE/Safari)

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

Istnieje plugin do jQuery o nazwie inview który dodaje nowe zdarzenie "inview".

Oto kod do wtyczki jQuery, która nie używa zdarzeń:

$.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 );

Znalazłem to w komentarzu tutaj ( http://remysharp.com/2009/01/26/element-in-view-event-plugin / ) przez gościa o imieniu James

Możesz użyć wtyczki jquery "on screen", aby sprawdzić, czy element znajduje się w bieżącym widoku podczas przewijania. Wtyczka ustawia": na ekranie " selektora na true, gdy selektor pojawi się na ekranie. To jest link do wtyczki, którą możesz dołączyć do swojego projektu. " http://benpickles.github.io/onScreen/jquery.onscreen.min.js "

Możesz wypróbować poniższy przykład, który działa dla mnie.

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

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

Bazując na tej wspaniałej odpowiedzi , możesz ją nieco uprościć używając ES2015+:

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

Jeśli nie dbasz o to, aby Góra wyszła z okna i po prostu dbasz o to, aby dół był oglądany, można to uprościć do

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

Lub nawet jednowarstwowy

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

Plain vanilla aby sprawdzić czy element (el) jest widoczny w przewijalnym div (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
},

Użycie z jQuery:

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

Mam taką metodę w mojej aplikacji, ale nie używa 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: ta metoda działa dobrze dla IE (przynajmniej w wersji 6). Przeczytaj komentarze dotyczące kompatybilności z FF.

Jeśli chcesz dostosować to do przewijania elementu w innym 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)); 
}

Zmodyfikowano zaakceptowaną odpowiedź tak, że element musi mieć właściwość display ustawioną na coś innego niż "none", aby jakość była widoczna.

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

Oto inne rozwiązanie z 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>

Zobacz to w JSFiddle

Oto sposób na osiągnięcie tego samego za pomocą Mootools, w poziomie, pionie lub obu.

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

Musiałem sprawdzić widoczność w elementach wewnątrz przewijalnego kontenera DIV

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

Ta metoda zwróci true, jeśli jakakolwiek część elementu jest widoczna na stronie. W moim przypadku zadziałało to lepiej i może pomóc komuś innemu.

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

Prosta modyfikacja dla scrollable div (container)

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

Uwaga: to nie działa, jeśli element jest większy niż przewijalny div.

Zaadaptowałem to krótkie rozszerzenie funkcji jQuery, z którego możesz swobodnie korzystać (licencja 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));
};

Przykład oparty na Ta odpowiedź aby sprawdzić, czy element jest widoczny w 75% (tzn. mniej niż 25% z niego jest poza ekranem).

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

Szukałem sposobu, aby sprawdzić, czy element wkrótce pojawi się w widoku, więc rozszerzając fragmenty powyżej udało mi się to zrobić. pomyślałem, że zostawię to tutaj na wypadek, gdyby komuś pomogło

Elm = jest elementem, który chcesz sprawdzić jest w widoku

ScrollElement = możesz przekazać Okno lub element nadrzędny, który ma scroll

Offset = jeśli chcesz, aby odpalił, gdy element jest 200px dalej przed jego na ekranie następnie przekazać 200

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

Wolę używać jQuery expr

jQuery.extend(jQuery.expr[':'], {  
    inview: function (elem) {
        var t = $(elem);
        var offset = t.offset();
        var win = $(window); 
        var winST = win.scrollTop();
        var elHeight = t.outerHeight(true);

        if ( offset.top > winST - elHeight && offset.top < winST + elHeight + win.height()) {
            return true;    
        }    
        return false;  
    }
});

Więc możesz go użyć w ten sposób

$(".my-elem:inview"); //returns only element that is in view
$(".my-elem").is(":inview"); //check if element is in view
$(".my-elem:inview").length; //check how many elements are in view

Możesz łatwo dodać taki kod wewnątrz scroll funkcji event itp. aby to sprawdzić za każdym razem, użytkownik będzie przewijać widok.

Napisałem komponent do tego zadania, zaprojektowany do obsługi dużej liczby elementów niezwykle szybko (w tempie na wolnym telefonie).

Działa z każdym typem kontenera przewijania, do którego masz dostęp – oknem, elementami HTML, wbudowanym iframe, oknem potomnym – i jest bardzo elastyczny w tym, co wykrywa ( pełna lub częściowa widoczność, border box lub content box, custom Strefa tolerancji , etc).

Ogromny, w większości automatycznie generowany zestaw testów zapewnia, że działa zgodnie z reklamą, cross-browser .

Spróbuj jeśli chcesz: jQuery.isInView . W przeciwnym razie możesz znaleźć inspirację w kodzie źródłowym, np. tutaj .