Periksa apakah pengguna telah menggulir ke bawah

Saya sedang membuat sistem pagination (semacam Facebook) di mana konten dimuat ketika pengguna menggulir ke bawah. Saya membayangkan cara terbaik untuk melakukannya adalah dengan menemukan ketika pengguna berada di bagian bawah halaman dan menjalankan kueri ajax untuk memuat lebih banyak posting.

Satu-satunya masalah adalah saya tidak tahu bagaimana memeriksa apakah pengguna telah menggulir ke bagian bawah halaman dengan jQuery. Ada ide?

Saya perlu menemukan cara untuk memeriksa kapan pengguna telah menggulir ke bagian bawah halaman dengan jQuery.

Gunakan .scroll()acara pada window, seperti ini:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

Anda dapat mengujinya di sini , ini mengambil gulir atas jendela, jadi berapa gulir ke bawah, menambah ketinggian jendela yang terlihat dan memeriksa apakah itu sama dengan tinggi dari keseluruhan konten ( document). Jika Anda ingin memeriksa apakah pengguna berada di dekat bagian bawah, itu akan terlihat seperti ini:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

Anda dapat menguji versi itu di sini , sesuaikan 100saja dengan piksel apa pun dari bagian bawah yang ingin Anda picu.

Jawaban Nick Craver berfungsi dengan baik, lupakan masalah yang nilainya $(document).height()bervariasi berdasarkan peramban.

Untuk membuatnya berfungsi di semua browser, gunakan fungsi ini dari James Padolsey :

function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

di tempat $(document).height(), sehingga kode terakhir adalah:

$(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == getDocHeight()) {
           alert("bottom!");
       }
   });

Saya tidak yakin mengapa ini belum diposting, tetapi sesuai dokumentasi dari MDN , cara paling sederhana adalah dengan menggunakan properti javascript asli:

element.scrollHeight - element.scrollTop === element.clientHeight

Mengembalikan nilai true ketika Anda berada di bagian bawah elemen yang dapat digulir. Jadi cukup gunakan javascript:

element.addEventListener('scroll', function(event)
{
    var element = event.target;
    if (element.scrollHeight - element.scrollTop === element.clientHeight)
    {
        console.log('scrolled');
    }
});

scrollHeightmemiliki dukungan luas di browser, mulai dari 8 hingga lebih tepatnya, sementara clientHeightdan scrollTopkeduanya didukung oleh semua orang. Bahkan ie 6. Ini harus lintas browser aman.

Bagi mereka yang menggunakan solusi Nick dan mendapatkan peringatan / peristiwa berulang, Anda bisa menambahkan baris kode di atas contoh peringatan:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       alert("near bottom!");
   }
});

Ini berarti bahwa kode hanya akan memecat pertama kali Anda berada dalam 100px dari bagian bawah dokumen. Itu tidak akan terulang jika Anda menggulir mundur ke atas dan kemudian kembali ke bawah, yang mungkin bermanfaat atau tidak tergantung pada apa Anda menggunakan kode Nick.

Lebih jauh lagi ke jawaban yang diterima dengan sangat baik dari Nick Craver, Anda dapat mencekik acara gulir agar tidak diaktifkan terlalu sering sehingga meningkatkan kinerja browser :

var _throttleTimer = null;
var _throttleDelay = 100;
var $window = $(window);
var $document = $(document);

$document.ready(function () {

    $window
        .off('scroll', ScrollHandler)
        .on('scroll', ScrollHandler);

});

function ScrollHandler(e) {
    //throttle event:
    clearTimeout(_throttleTimer);
    _throttleTimer = setTimeout(function () {
        console.log('scroll');

        //do work
        if ($window.scrollTop() + $window.height() > $document.height() - 100) {
            alert("near bottom!");
        }

    }, _throttleDelay);
}

Jawaban Nick Craver perlu sedikit dimodifikasi agar berfungsi di iOS 6 Safari Mobile dan harus:

$(window).scroll(function() {
   if($(window).scrollTop() + window.innerHeight == $(document).height()) {
       alert("bottom!");
   }
});

Mengubah $ (window) .height () untuk window.innerHeight harus dilakukan karena ketika address bar tersembunyi sebuah 60px tambahan ditambahkan ke ketinggian jendela tetapi menggunakan $(window).height()tidak tidak mencerminkan perubahan ini, saat menggunakan window.innerHeighttidak.

Catatan : window.innerHeightProperti juga menyertakan ketinggian bilah gulir horizontal (jika dirender), tidak seperti $(window).height()yang tidak akan memasukkan tinggi bilah gulir horizontal. Ini bukan masalah di Mobile Safari, tetapi dapat menyebabkan perilaku yang tidak terduga di browser lain atau versi Mobile Safari yang akan datang. Mengubah ==ke >=bisa memperbaiki ini untuk kasus penggunaan paling umum.

Baca lebih lanjut tentang window.innerHeightproperti di sini

Inilah pendekatan yang cukup sederhana

const didScrollToBottom = elm.scrollTop + elm.clientHeight == elm.scrollHeight

Contoh

elm.onscroll = function() {
    if(elm.scrollTop + elm.clientHeight == elm.scrollHeight) {
        // User has scrolled to the bottom of the element
    }
}

Di mana elmelemen diambil dari mis document.getElementById.

Berikut adalah sepotong kode yang akan membantu Anda men-debug kode Anda, saya menguji jawaban di atas dan menemukan mereka buggy. Saya telah menguji yang berikut pada Chrome, IE, Firefox, IPad (Safari). Saya tidak memiliki orang lain yang diinstal untuk menguji ...

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var winElement = $(window)[0];

         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
            alert('bottom');
         }
      });
   });
</script>

Mungkin ada solusi yang lebih sederhana, tetapi saya berhenti pada titik di mana IT BEKERJA

Jika Anda masih mengalami masalah dengan beberapa peramban jahat, berikut adalah beberapa kode untuk membantu Anda melakukan debug:

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var details = "";
         details += '<b>Document</b><br />';
         details += 'clientHeight:' + docElement.clientHeight + '<br />';
         details += 'clientTop:' + docElement.clientTop + '<br />';
         details += 'offsetHeight:' + docElement.offsetHeight + '<br />';
         details += 'offsetParent:' + (docElement.offsetParent == null) + '<br />';
         details += 'scrollHeight:' + docElement.scrollHeight + '<br />';
         details += 'scrollTop:' + docElement.scrollTop + '<br />';

         var winElement = $(window)[0];
         details += '<b>Window</b><br />';
         details += 'innerHeight:' + winElement.innerHeight + '<br />';
         details += 'outerHeight:' + winElement.outerHeight + '<br />';
         details += 'pageYOffset:' + winElement.pageYOffset + '<br />';
         details += 'screenTop:' + winElement.screenTop + '<br />';
         details += 'screenY:' + winElement.screenY + '<br />';
         details += 'scrollY:' + winElement.scrollY + '<br />';

         details += '<b>End of page</b><br />';
         details += 'Test:' + (docElement.scrollHeight - winElement.innerHeight) + '=' + winElement.pageYOffset + '<br />';
         details += 'End of Page? ';
         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
             details += 'YES';
         } else {
             details += 'NO';
         }

         $('#test').html(details);
      });
   });
</script>
<div id="test" style="position: fixed; left:0; top: 0; z-index: 9999; background-color: #FFFFFF;">

Saya harap ini akan menghemat waktu seseorang.

Silakan periksa jawaban ini

 window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
       console.log("bottom");
    }
};

Anda dapat melakukannya footerHeight - document.body.offsetHeightuntuk melihat apakah Anda berada di dekat footer atau mencapai footer

var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;

Ini menghitung scroll bar jarak ke bagian bawah elemen. Sama dengan 0, jika bilah gulir telah mencapai bagian bawah.

Ini adalah dua sen saya:

$('#container_element').scroll( function(){
        console.log($(this).scrollTop()+' + '+ $(this).height()+' = '+ ($(this).scrollTop() + $(this).height())   +' _ '+ $(this)[0].scrollHeight  );
        if($(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight){
            console.log('bottom found');
        }
    });

Pure JS dengan cross-browser dan debouncing ( Performa cukup bagus )

var CheckIfScrollBottom = debouncer(function() {
    if(getDocHeight() == getScrollXY()[1] + window.innerHeight) {
       console.log('Bottom!');
    }
},500);

document.addEventListener('scroll',CheckIfScrollBottom);

function debouncer(a,b,c){var d;return function(){var e=this,f=arguments,g=function(){d=null,c||a.apply(e,f)},h=c&&!d;clearTimeout(d),d=setTimeout(g,b),h&&a.apply(e,f)}}
function getScrollXY(){var a=0,b=0;return"number"==typeof window.pageYOffset?(b=window.pageYOffset,a=window.pageXOffset):document.body&&(document.body.scrollLeft||document.body.scrollTop)?(b=document.body.scrollTop,a=document.body.scrollLeft):document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)&&(b=document.documentElement.scrollTop,a=document.documentElement.scrollLeft),[a,b]}
function getDocHeight(){var a=document;return Math.max(a.body.scrollHeight,a.documentElement.scrollHeight,a.body.offsetHeight,a.documentElement.offsetHeight,a.body.clientHeight,a.documentElement.clientHeight)}

Demo: http://jsbin.com/geherovena/edit?js,output

PS: Debouncer, getScrollXY, getDocHeighttidak ditulis oleh saya

Saya hanya menunjukkan cara kerjanya, Dan bagaimana saya akan melakukannya

Solusi saya di js polos:

let el=document.getElementById('el');
el.addEventListener('scroll', function(e) {
    if (this.scrollHeight - this.scrollTop - this.clientHeight<=0) {
        alert('Bottom');
    }
});

#el{
  width:400px;
  height:100px;
  overflow-y:scroll;
}

<div id="el">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>

Coba ini untuk kondisi yang cocok jika gulir ke ujung bawah

if ($(this)[0].scrollHeight - $(this).scrollTop() == 
    $(this).outerHeight()) {

    //code for your custom logic

}

Nick menjawabnya dengan baik tetapi Anda akan memiliki fungsi yang berulang saat menggulir atau tidak akan berfungsi sama sekali jika pengguna memperbesar jendela. Saya datang dengan memperbaiki matematika yang mudah saja. Sekitar ketinggian pertama dan itu berfungsi seperti yang diasumsikan.

    if (Math.round($(window).scrollTop()) + $(window).innerHeight() == $(document).height()){
    loadPagination();
    $(".go-up").css("display","block").show("slow");
}

Anda dapat mencoba kode berikut,

$("#dashboard-scroll").scroll(function(){
    var ele = document.getElementById('dashboard-scroll');
    if(ele.scrollHeight - ele.scrollTop === ele.clientHeight){
       console.log('at the bottom of the scroll');
    }
});

Ini memberikan hasil yang akurat, ketika memeriksa elemen yang dapat digulir (yaitu tidak window):

// `element` is a native JS HTMLElement
if ( element.scrollTop == (element.scrollHeight - element.offsetHeight) )
    // Element scrolled to bottom

offsetHeightharus memberikan tinggi nyata elemen yang terlihat (termasuk padding, margin, dan scrollbar), dan scrollHeightmerupakan keseluruhan tinggi elemen termasuk area yang tidak terlihat (meluap).

jQuery's .outerHeight()harus memberikan hasil yang serupa dengan JS ini .offsetHeight- dokumentasi di MDN untuk offsetHeighttidak jelas tentang dukungan lintas-browser. Untuk membahas lebih banyak opsi, ini lebih lengkap:

var offsetHeight = ( container.offsetHeight ? container.offsetHeight : $(container).outerHeight() );
if  ( container.scrollTop == (container.scrollHeight - offsetHeight) ) {
   // scrolled to bottom
}

Semua solusi ini tidak berfungsi untuk saya di Firefox dan Chrome, jadi saya menggunakan fungsi khusus dari Miles O'Keefe dan meder omuraliev seperti ini:

function getDocHeight()
{
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

function getWindowSize()
{
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [myWidth, myHeight];
}

$(window).scroll(function()
{
    if($(window).scrollTop() + getWindowSize()[1] == getDocHeight())
    {
        alert("bottom!");
    }
});

Inilah dua sen saya karena jawaban yang diterima tidak berhasil untuk saya.

var documentAtBottom = (document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight;

Alih-alih mendengarkan acara gulir, menggunakan Intersection Observer adalah yang murah untuk memeriksa apakah elemen terakhir terlihat di viewport (itu berarti pengguna digulir ke bawah). Ini juga didukung untuk IE7 dengan polyfill .

var observer = new IntersectionObserver(function(entries){
   if(entries[0].isIntersecting === true)
      console.log("Scrolled to the bottom");
   else
      console.log("Not on the bottom");
}, {
   root:document.querySelector('#scrollContainer'),
   threshold:1 // Trigger only when whole element was visible
});

observer.observe(document.querySelector('#scrollContainer').lastElementChild);

#scrollContainer{
  height: 100px;
  overflow: hidden scroll;
}

<div id="scrollContainer">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
  <div>Item 10</div>
</div>

Biarkan saya menunjukkan pendekatan tanpa JQuery. Fungsi JS sederhana:

function isVisible(elem) {
  var coords = elem.getBoundingClientRect();
  var topVisible = coords.top > 0 && coords.top < 0;
  var bottomVisible = coords.bottom < shift && coords.bottom > 0;
  return topVisible || bottomVisible;
}

Contoh singkat cara menggunakannya:

var img = document.getElementById("pic1");
    if (isVisible(img)) { img.style.opacity = "1.00";  }

Saya menggunakan @ddanone menjawab dan menambahkan panggilan Ajax.

$('#mydiv').on('scroll', function(){
  function infiniScroll(this);
});

function infiniScroll(mydiv){
console.log($(mydiv).scrollTop()+' + '+ $(mydiv).height()+' = '+ ($(mydiv).scrollTop() + $(mydiv).height())   +' _ '+ $(mydiv)[0].scrollHeight  );

if($(mydiv).scrollTop() + $(mydiv).height() == $(mydiv)[0].scrollHeight){
    console.log('bottom found');
    if(!$.active){ //if there is no ajax call active ( last ajax call waiting for results ) do again my ajax call
        myAjaxCall();
    }
}

}

Untuk menghentikan peringatan berulang dari jawaban Nick

ScrollActivate();

function ScrollActivate() {
    $(window).on("scroll", function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            $(window).off("scroll");
            alert("near bottom!");
        }
    });
}

Google Chrome memberikan ketinggian penuh halaman jika Anda menelepon $(window).height()

Sebagai gantinya, gunakan window.innerHeightuntuk mengambil ketinggian jendela Anda. Pemeriksaan yang diperlukan harus:

if($(window).scrollTop() + window.innerHeight > $(document).height() - 50) {
    console.log("reached bottom!");
}

Ternyata yang berhasil bagi saya adalah 'tubuh' dan bukan 'jendela' seperti ini:

$('body').scroll(function() {


 if($('body').scrollTop() + $('body').height() == $(document).height()) {
     //alert at buttom
 }
 });

untuk penggunaan kompatibilitas lintas-browser:

  function getheight(){
    var doc = document;
    return  Math.max(
        doc.body.scrollHeight, doc.documentElement.scrollHeight,
        doc.body.offsetHeight, doc.documentElement.offsetHeight,
        doc.body.clientHeight, doc.documentElement.clientHeight

        );
   }

lalu alih-alih $ (dokumen) .height () panggil fungsi getheight ()

$('body').scroll(function() {


   if($('body').scrollTop() + $('body').height() == getheight()  ) {
     //alert at bottom
 }
});

untuk penggunaan dekat bawah:

$('body').scroll(function() {


if($('body').scrollTop() + $('body').height() > getheight() -100 ) {
    //alert near bottom
 }
 });