Periksa apakah pengguna telah menggulir ke bawah

668

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.

Johnny
sumber
Itu lucu, saya mencoba mencari tahu fungsi mana yang dipanggil ketika saya gulir ke bawah, sehingga saya dapat memblokir "fitur" yang menyebalkan ini.
endolith
Untuk solusi React.js, tautan ini mungkin membantu: stackoverflow.com/a/53158893/4265546
raksheetbhat

Jawaban:

1024

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.

Nick Craver
sumber
32
Seperti biasa Anda sampai di sana sebelum saya. Ngomong-ngomong, ke OP, jika Anda memiliki wadah posting, gunakan ID itu alih-alih "jendela", juga, Anda mungkin ingin mengubah .height () ke scrollHeight terakhir
Christian
4
Peringatan panggilan Firefox ("bawah!"); berkali-kali (berfungsi baik dengan chrome dan safari)
Marco Matarazzi
3
itu agak buggy, jika Anda melakukan console.log()alih - alih waspada itu kadang mengulangi perintah.
Jürgen Paul
19
@KevinVella Vella kombinasi yang baik adalah menggunakan ini dengan _.debounce () pada utilitas garis bawah untuk mencegahnya menyala hingga pengguna berhenti menggulir - underscorejs.org/#debounce -
JohnnyFaldo
3
@NickCraver apakah ada implementasi js murni yang tersedia?
Dewsworld
116

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!");
       }
   });
Miles O'Keefe
sumber
6
Ia telah memperbarui dengan fungsi versi yang agak dikompresi, getDocHeight () {var D = dokumen; return Math.max (D.body.scrollHeight, D.documentElement.scrollHeight, D.body.offsetHeight, D.documentElement.offsetHeight, D.body.clientHeight, D.documentElement.clientHeight); }
Drew
yang mengingatkan saya ketika saya mencapai bagian atas, bukan bagian bawah (Chrome).
Damien Roche
Mungkin lebih baik menggunakan mindaripada max, terutama jika ada margin, untuk menghindari secara tidak sengaja mencegah pengguna dari menggulir ke apa yang Anda pikir adalah bagian bawah halaman.
Solomon Ucko
104

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.

Félix Gagnon-Grenier
sumber
1
Perhatikan bahwa dalam beberapa situasi ini mungkin tidak demikian. Firefox 47 melaporkan textarea clientHeight sebagai 239 sedangkan persamaan di atas memberikan 253 ketika digulir ke bawah. Mungkin padding / border atau sesuatu yang mempengaruhinya? Either way, menambahkan beberapa ruang gerak tidak akan sakit, seperti var isAtBottom = ( logField.scrollHeight - logField.scrollTop <= logField.clientHeight + 50 );. Ini berguna untuk menggulir otomatis bidang hanya jika sudah ada di bagian bawah (sehingga pengguna dapat memeriksa secara manual bagian tertentu dari log waktu nyata tanpa kehilangan tempat mereka, dll).
Beejor
Saya akan menambahkan bahwa itu mungkin untuk mengembalikan negatif palsu karena satu sisi dapat mengembalikan desimal kecil sementara sisi lain mengembalikan bilangan bulat (mis. 200.181819304947Dan 200). Saya menambahkan Math.floor()untuk membantu menangani itu, tetapi saya tidak tahu seberapa andal ini.
Hanna
1
Bagi saya, ini tidak berfungsi lintas browser. Saya mendapatkan hasil yang sangat berbeda pada chrome dibandingkan dengan firefox.
Tadej
1
Saya mencoba ini pada elemen <body>, dan ini diaktifkan ketika browser digulir ke TOP, bukan bagian bawah.
Chris Sobolewski
10
Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) <= 3.0(ganti 3.0 dengan toleransi piksel apa pun yang menurut Anda sesuai untuk keadaan Anda). Ini adalah cara untuk pergi karena (A) clientHeight,, scrollTopdan clientHeightsemuanya bulat yang berpotensi menyebabkan kesalahan 3px jika semua sejajar, (B) 3 piksel tidak terlihat oleh pengguna sehingga pengguna mungkin berpikir ada sesuatu yang salah dengan situs Anda ketika mereka "berpikir" mereka berada di bagian bawah halaman padahal sebenarnya tidak, dan (C) perangkat tertentu (terutama yang tanpa mouse) dapat memiliki perilaku aneh ketika menggulir.
Jack Giffin
50

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.

Tim Carr
sumber
1
Saya baru saja berkomentar dan mengatakan di mana baris kode itu karena relevan dengan jawaban orang lain tetapi +1 untuk maksudnya!
Nate-Wilkins
Maaf, saya tidak bisa (dan masih tidak bisa) melihat cara menambahkan komentar ke jawabannya (seperti saya bisa di sini)?
Tim Carr
Ya pengguna baru tidak dapat menambahkan komentar ke posting kecuali Anda mendapatkan lebih banyak perwakilan.
Nate-Wilkins
Di luar yang pertama jika Anda bisa menempatkan yang berbeda jika itu menguji jika perubahan yang Anda inginkan skrip ada, katakanlah sebuah kelas telah diterapkan pada div. Ini akan membuat sarang kedua jika tidak berjalan jika sudah berjalan.
1934286
bagaimana saya bisa memilih id id tertentu daripada seluruh jendela?
James Smith
40

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);
}
George Filippakos
sumber
Mungkin harus ditunjukkan bahwa ini memerlukan Underscore.js: underscorejs.org . Ini poin yang sangat bagus. Acara gulir harus selalu dicekik untuk menghindari masalah kinerja yang serius.
Jude Osborn
Mungkin hanya saya dan itu bisa menggunakan beberapa benchmark, tapi saya tidak suka gagasan memanggil clearTimeout dan setTimeout pada setiap acara gulir. Saya akan mengeluarkan 1 setTimeout dan menambahkan beberapa penjaga di penangan itu. Ini mungkin hanya optimasi mikro (jika ada).
Meringis Putus Asa
Ini adalah tambahan yang sangat rapi! Saya dapat memikirkan satu perbaikan lebih lanjut. Saat ini fungsi yang memeriksa ketinggian tidak akan berjalan jika pengguna terus menggulir. Jika ini merupakan masalah (mis. Anda ingin memicu fungsi ketika pengguna menggulir setengah jalan ke bawah terlepas dari apakah mereka terus menggulir) Anda dapat dengan mudah memastikan bahwa fungsi tersebut dipanggil sementara masih melarang beberapa panggilan selama interval yang dipilih. Inilah intisari untuk menunjukkannya. gist.github.com/datacarl/7029558
datacarl
Apa? Meminta banyak mesin untuk mencegah perhitungan sederhana? Saya tidak melihat bagaimana itu lebih efisien sama sekali
Rambatino
37

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

Yosi
sumber
window.innerHeight lebih masuk akal untuk apa yang saya coba capai, terima kasih!
Amir5000
Bagaimana cara mendapatkan sisa ketinggian setelah gulir?
OPV
21

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.

Frederik Witte
sumber
17

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.

Cakar
sumber
Jawaban terbaik untuk Vanilla js, Tidak ada solusi jQuery. Gunakanvar docElement = document.documentElement; var winElement = window
jperelli
Ini pada 2019. Alih-alih winElement.pageYOffsetAnda juga bisa menggunakan winElement.scrollY.
Noel Abrahams
15

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

Junaid Qadir
sumber
12
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.

Vasyl Gutnyk
sumber
1
Saya melakukan yang berikut dan bekerja dengan sempurna. Terima kasih. var shouldScroll = (elem.scrollHeight - elem.scrollTop - elem.clientHeight) == 0;
jiminssy
11

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');
        }
    });
ddanone
sumber
Sudah coba Anda menggunakan solusi Anda, itu berfungsi dengan baik tetapi dalam kasus-kasus ketika elemen memiliki padding - itu tidak berfungsi karena menghitung tinggi elemen murni, tanpa termasuk padding, untuk menyelesaikan ini saya mengubah ini $(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight=>$(this).scrollTop() + $(this).outerHeight(true) >= $(this)[0].scrollHeight
Taras Chernata
6

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

l2aelba
sumber
Sempurna. Diuji di Firefox dan Chrome
Erlisar Vasquez
Saya mendapatkan kesalahan berikut: Diharapkan 3 argumen, tetapi mendapat 2. Argumen 'c' tidak disediakan.
Sober
6

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>

Bakos Bence
sumber
4

Coba ini untuk kondisi yang cocok jika gulir ke ujung bawah

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

    //code for your custom logic

}
Hiren Patel
sumber
3

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");
}
Florin Andrei
sumber
3

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');
    }
});
Shahrukh Anwar
sumber
2

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
}
Yuval A.
sumber
coba Math.floor(element.scrollTop) === element.scrollHeight - element.offsetHeightkalau-kalau scrollTop adalah desimal yang tidak akan bekerja tanpaMath.floor()
Michail Michailidis
1

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!");
    }
});
hayj
sumber
1

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

var documentAtBottom = (document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight;
Vince Panuccio
sumber
1

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>

StefansArya
sumber
Masalahnya dengan Intersection Observer adalah jika jendela awal relatif kecil (katakanlah tata letak dasar sebelum mengambil gambar tanpa bilah gulir), panggilan balik pengamat dipicu dengan segera. Pendengar gulir sebenarnya menunggu seseorang untuk menggulir. Dan scrollbar tidak akan muncul sebelum batch gambar pertama dan lain-lain diambil. Jadi Pengamat titik-temu tidak semuanya solusi.
Aleks
@Aleks Anda dapat memanggil .observe(...)pendengar acara seperti ketika pengguna mengarahkan / menyentuh wadah gulir Anda sehingga tidak akan langsung terpicu.
StefansArya
0

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";  }
Alexei Zababurin
sumber
5
Ini tidak menjawab pertanyaan. Pertanyaannya adalah bagaimana mendeteksi bahwa pengguna telah menggulirkan jendela sampai ke bawah. Kode Anda sedang memeriksa apakah ada elemen tertentu yang terlihat.
Peter Hall
0

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

}

Henrique C.
sumber
0

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!");
        }
    });
}
Arun Prasad ES
sumber
0

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!");
}
alierdogan7
sumber
0

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