Pertanyaan Periksa apakah elemen terlihat setelah bergulir


Saya sedang memuat elemen melalui AJAX. Beberapa di antaranya hanya terlihat jika Anda menggulir halaman ke bawah.
Adakah yang bisa saya ketahui jika suatu elemen sekarang berada di bagian halaman yang terlihat?


976
2018-01-28 10:00


asal


Jawaban:


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 sepenuhnya dalam tampilan 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');
}

1133
2018-01-28 15:36



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

296
2018-03-18 13:31



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

Meniru peristiwa "muncul" khusus, yang diaktifkan saat elemen bergeser ke tampilan atau sebaliknya terlihat oleh pengguna.

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

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


113
2017-08-20 21:31



Berikut adalah solusi JavaScript murni saya yang berfungsi jika disembunyikan 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;
  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: Saya telah memperbarui solusi ke akun untuk menggulir melewati elemen sehingga tersembunyi di atas bagian atas penampung gulir-bisa.


65
2018-02-07 12:02



Plugin jQuery Waypoints berjalan sangat bagus di sini.

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

Ada beberapa contoh di situs plugin.


40
2017-12-04 12:08



WebResourcesDepot menulis skrip untuk memuat sambil menggulir yang menggunakan jQuery beberapa waktu lalu. Anda dapat melihat mereka Demo Langsung di Sini. Daging dari fungsi mereka adalah ini:

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



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 tersebut terlihat seperti ini

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

Itu bekerja untuk saya dengan baik


14
2018-04-29 10:24



Tweek fungsi keren 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));
}

12
2018-04-30 16:08



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

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

untuk ini:

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

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


6
2017-10-23 17:30