Saya memuat elemen melalui AJAX. Beberapa di antaranya hanya terlihat jika Anda menggulir ke bawah halaman.
Apakah ada cara saya bisa tahu jika suatu elemen sekarang di bagian yang terlihat dari halaman?

Ini harus melakukan trik:

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

Fungsi Utilitas Sederhana Ini akan memungkinkan Anda untuk memanggil fungsi utilitas yang menerima elemen yang Anda cari dan jika Anda ingin elemen tersebut sepenuhnya terlihat atau sebagian.

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

Pemakaian

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

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

Jawaban ini di Vanilla:

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

Pembaruan: gunakan IntersectionObserver

Metode terbaik yang saya temukan sejauh ini adalah plugin jQueryerge . Bekerja seperti pesona.

Meniru peristiwa "muncul" tersuai, yang menyala ketika suatu elemen bergulir ke tampilan atau terlihat oleh pengguna.

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

Plugin ini dapat digunakan untuk mencegah permintaan yang tidak perlu untuk konten yang tersembunyi atau di luar area yang dapat dilihat.

Inilah solusi JavaScript murni saya yang berfungsi jika tersembunyi di dalam wadah yang dapat digulir juga.

Demo di sini (coba ubah ukuran jendela juga)

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: Saya telah memperbarui solusi untuk akun untuk menggulir melewati elemen sehingga tersembunyi di atas bagian atas wadah yang dapat digulir. EDIT 2018-10-08: Diperbarui untuk menangani ketika digulirkan dari tampilan di atas layar.

Menggunakan IntersectionObserver API (asli di browser modern)

Mudah & efisien untuk menentukan apakah suatu elemen terlihat di viewpor, atau dalam wadah yang dapat digulir, dengan menggunakan pengamat .

Kebutuhan untuk melampirkan scrollacara dan secara manual memeriksa event callback dihilangkan, sehingga efisiensi:

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

Lihat tabel dukungan browser (tidak didukung di IE / Safari)

Plugin jQuery Waypoints berjalan sangat baik di sini.

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

Ada beberapa contoh di situs plugin .

Bagaimana tentang

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

Setelah itu, Anda dapat memicu apa pun yang Anda inginkan setelah elemen dalam tampilan seperti ini

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

Itu baik-baik saja bagi saya

WebResourcesDepot menulis skrip untuk dimuat saat menggulir yang menggunakan jQuery beberapa waktu lalu. Anda dapat melihat Demo Langsung mereka Di Sini . Fungsi mereka adalah sebagai berikut:

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

Fungsi keren Tweeked Scott Dowding untuk kebutuhan saya - ini digunakan untuk menemukan apakah elemen tersebut baru saja menggulir ke layar yaitu tepi atas.

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

Vanila polos untuk memeriksa apakah elemen ( el) terlihat di div yang dapat digulir ( 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
},

Penggunaan dengan jQuery:

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

isScrolledIntoView adalah fungsi yang sangat diperlukan, jadi saya mencobanya, berfungsi untuk elemen yang tidak lebih tinggi dari viewport, tetapi jika elemen lebih besar karena viewport tidak berfungsi. Untuk memperbaikinya dengan mudah ubah kondisinya

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

untuk ini:

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

Lihat demo di sini: http://jsfiddle.net/RRSmQ/

Sebagian besar jawaban di sini tidak memperhitungkan bahwa suatu elemen juga dapat disembunyikan karena itu digulirkan dari pandangan div, tidak hanya seluruh halaman.

Untuk menutupi kemungkinan itu, Anda pada dasarnya harus memeriksa apakah elemen diposisikan di dalam batas masing-masing orang tuanya.

Solusi ini melakukan hal itu:

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

Ini juga memungkinkan Anda menentukan berapa persentase yang harus terlihat di setiap arah.
Itu tidak mencakup kemungkinan bahwa itu mungkin disembunyikan karena faktor lain, seperti display: hidden.

Ini harus bekerja di semua browser utama, karena hanya digunakan getBoundingClientRect. Saya pribadi mengujinya di Chrome dan 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));
}

Berikut ini solusi lain dari 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>

Lihat di JSFiddle

Ini mempertimbangkan padding, border, atau margin elemen yang dimiliki serta elemen yang lebih besar dari viewport itu sendiri.

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

Untuk menyebutnya gunakan sesuatu seperti ini:

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

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

Ada plugin untuk jQuery yang disebut inview yang menambahkan acara "inview" baru.

Berikut ini beberapa kode untuk plugin jQuery yang tidak menggunakan acara:

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

Saya menemukan ini dalam komentar di sini ( http://remysharp.com/2009/01/26/element-in-view-event-plugin/ ) oleh seorang pria bernama James

Saya perlu memeriksa visibilitas pada elemen di dalam wadah DIV yang dapat digulir

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

Membangun dari jawaban hebat ini , Anda dapat menyederhanakannya sedikit lebih jauh menggunakan ES2015 +:

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

Jika Anda tidak peduli tentang bagian atas keluar dari jendela dan hanya peduli bahwa bagian bawah telah dilihat, ini dapat disederhanakan

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

atau bahkan satu-liner

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

Anda dapat menggunakan plugin jquery "onScreen" untuk memeriksa apakah elemen tersebut ada di viewport saat ini ketika Anda menggulir. Plugin mengatur ": onScreen" pemilih menjadi true ketika pemilih muncul di layar. Ini adalah tautan untuk plugin yang dapat Anda sertakan dalam proyek Anda. " http://benpickles.github.io/onScreen/jquery.onscreen.min.js "

Anda dapat mencoba contoh di bawah ini yang berfungsi untuk saya.

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

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

Saya memiliki metode seperti itu dalam aplikasi saya, tetapi tidak menggunakan 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));
}

Sunting: Metode ini bekerja dengan baik untuk IE (setidaknya versi 6). Baca komentar untuk kompatibilitas dengan FF.

Jika Anda ingin mengubah ini untuk menggulir item dalam div lain,

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

Dimodifikasi jawaban yang diterima sehingga elemen harus memiliki properti tampilan diatur ke sesuatu selain "tidak ada" agar kualitas terlihat.

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

Berikut adalah cara untuk mencapai hal yang sama menggunakan Mootools, secara horizontal, vertikal atau keduanya.

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

Contoh didasarkan dari jawaban ini untuk memeriksa apakah suatu elemen terlihat 75% (yaitu kurang dari 25% tidak aktif di layar).

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

Ada lebih dari 30 jawaban untuk pertanyaan ini, dan tidak satupun dari mereka menggunakan solusi JS murni yang sangat sederhana yang telah saya gunakan. Tidak perlu memuat jQuery hanya untuk menyelesaikan ini, karena banyak yang mendorong.

Untuk mengetahui apakah elemen tersebut berada dalam viewport, pertama-tama kita harus menentukan posisi elemen dalam tubuh. Kita tidak perlu melakukan ini secara rekursif seperti yang pernah saya pikirkan. Sebagai gantinya, kita bisa menggunakan element.getBoundingClientRect().

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

Nilai ini adalah perbedaan Y antara bagian atas objek dan bagian atas tubuh.

Kami kemudian harus memberi tahu apakah elemen tersebut dalam tampilan. Sebagian besar implementasi bertanya apakah elemen lengkap berada dalam viewport, jadi inilah yang akan kita bahas.

Pertama-tama, posisi atas jendela adalah: window.scrollY.

Kita bisa mendapatkan posisi bawah jendela dengan menambahkan ketinggian jendela ke posisi atasnya:

var window_bottom_position = window.scrollY + window.innerHeight;

Mari kita membuat fungsi sederhana untuk mendapatkan posisi teratas elemen:

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

Fungsi ini akan mengembalikan posisi teratas elemen dalam jendela atau akan kembali 0jika Anda memberikan sesuatu selain elemen dengan .getBoundingClientRect()metode. Metode ini sudah ada sejak lama, jadi Anda tidak perlu khawatir browser Anda tidak mendukungnya.

Sekarang, posisi teratas elemen kami adalah:

var element_top_position = getElementWindowTop(element);

Dan posisi dasar elemen adalah:

var element_bottom_position = element_top_position + element.clientHeight;

Sekarang kita dapat menentukan apakah elemen tersebut dalam viewport dengan memeriksa apakah posisi bawah elemen lebih rendah dari posisi atas viewport dan dengan memeriksa apakah posisi teratas elemen lebih tinggi dari posisi bawah viewport:

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

Dari sana, Anda dapat melakukan logika untuk menambah atau menghapus in-viewkelas pada elemen Anda, yang kemudian dapat Anda tangani dengan efek transisi di CSS Anda.

Saya benar-benar kagum bahwa saya tidak menemukan solusi ini di tempat lain, tetapi saya percaya bahwa ini adalah solusi paling bersih dan paling efektif, dan itu tidak mengharuskan Anda memuat jQuery!

Versi yang lebih efisien dari jawaban ini :

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

Metode ini akan mengembalikan true jika ada bagian elemen yang terlihat di halaman. Ini bekerja lebih baik dalam kasus saya dan dapat membantu orang lain.

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

Modifikasi sederhana untuk div yang dapat digulir (wadah)

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

CATATAN: ini tidak berfungsi jika elemen lebih besar dari div yang dapat digulir.

Saya mengadaptasi ekstensi fungsi jQuery singkat ini, yang dapat Anda rasa bebas untuk digunakan (lisensi 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));
};

Saya telah menulis sebuah komponen untuk tugas ini, yang dirancang untuk menangani sejumlah besar elemen dengan sangat cepat (hingga <10ms untuk 1000 elemen pada ponsel yang lambat ).

Ia bekerja dengan setiap jenis wadah gulir yang Anda miliki akses - jendela, elemen HTML, iframe tertanam, jendela anak spawned - dan sangat fleksibel dalam apa yang dideteksi ( visibilitas penuh atau sebagian , kotak batas atau kotak konten , zona toleransi khusus , dll. ).

Rangkaian uji yang sangat besar dan sebagian besar dihasilkan secara otomatis memastikan bahwa ia berfungsi seperti yang diiklankan, lintas-peramban .

Cobalah jika Anda suka: jQuery.isInView . Kalau tidak, Anda mungkin menemukan inspirasi dalam kode sumber, misalnya di sini .