Saya perlu mendeteksi apakah pengguna digulir ke bagian bawah halaman. Jika mereka ada di bagian bawah halaman, ketika saya menambahkan konten baru ke bawah, saya akan secara otomatis menggulirnya ke bagian bawah yang baru. Jika tidak ada di bagian bawah, mereka membaca konten sebelumnya lebih tinggi di halaman, jadi saya tidak ingin menggulirkannya secara otomatis karena mereka ingin tetap berada di tempat mereka.

Bagaimana saya bisa mendeteksi jika pengguna digulir ke bagian bawah halaman atau jika mereka menggulir lebih tinggi pada halaman?

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        // you're at the bottom of the page
    }
};

Lihat demo

Kode yang diperbarui untuk semua dukungan browser utama (termasuk IE10 & IE11)

window.onscroll = function(ev) {
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        alert("you're at the bottom of the page");
    }
};

Masalah dengan jawaban yang diterima saat ini adalah itu window.scrollY tidak tersedia di IE.

Berikut ini kutipan dari mdn tentang scrollY:

Untuk kompatibilitas lintas-browser, gunakan window.pageYOffset, bukan window.scrollY.

Dan cuplikan yang berfungsi:

window.onscroll = function(ev) {
    if ((window.innerHeight + window.pageYOffset ) >= document.body.offsetHeight) {
        alert("you're at the bottom of the page");
    }
};

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

Catatan untuk mac

Berdasarkan komentar @ Raphaël, ada masalah di mac karena offset kecil.
Kondisi yang diperbarui berikut berfungsi:

(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2

Saya tidak memiliki kesempatan untuk mengujinya lebih lanjut, jika seseorang dapat berkomentar tentang masalah khusus ini, itu akan bagus.

Jawaban yang diterima tidak berhasil untuk saya. Ini berhasil:

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
      // you're at the bottom of the page
      console.log("Bottom of page");
    }
};

Jika Anda ingin mendukung browser yang lebih lama (IE9) gunakan alias window.pageYOffsetyang memiliki dukungan yang sedikit lebih baik.

Saya mencari jawaban tetapi belum menemukan jawaban yang tepat. Berikut ini adalah solusi javascript murni yang berfungsi dengan Firefox, IE, dan Chrome terbaru pada saat jawaban ini:

// document.body.scrollTop alone should do the job but that actually works only in case of Chrome.
// With IE and Firefox it also works sometimes (seemingly with very simple pages where you have
// only a <pre> or something like that) but I don't know when. This hack seems to work always.
var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

// Grodriguez's fix for scrollHeight:
// accounting for cases where html/body are set to height:100%
var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;

// >= is needed because if the horizontal scrollbar is visible then window.innerHeight includes
// it and in that case the left side of the equation is somewhat greater.
var scrolledToBottom = (scrollTop + window.innerHeight) >= scrollHeight;

// As a bonus: how to scroll to the bottom programmatically by keeping the horizontal scrollpos:
// Since window.innerHeight includes the height of the horizontal scrollbar when it is visible
// the correct vertical scrollTop would be
// scrollHeight-window.innerHeight+sizeof(horizontal_scrollbar)
// Since we don't know the visibility/size of the horizontal scrollbar
// we scroll to scrollHeight that exceeds the value of the
// desired scrollTop but it seems to scroll to the bottom with all browsers
// without problems even when the horizontal scrollbar is visible.
var scrollLeft = (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft;
window.scrollTo(scrollLeft, scrollHeight);

Ini bekerja

window.onscroll = function() {

    // @var int totalPageHeight
    var totalPageHeight = document.body.scrollHeight; 

    // @var int scrollPoint
    var scrollPoint = window.scrollY + window.innerHeight;

    // check if we hit the bottom of the page
    if(scrollPoint >= totalPageHeight)
    {
        console.log("at the bottom");
    }
}

Jika Anda ingin mendukung browser yang lebih lama (IE9) ganti window.scrollY dengan window.pageYOffset

Saya baru saja mulai melihat ini dan jawaban di sini membantu saya, jadi terima kasih untuk itu. Saya telah sedikit memperluas sehingga kode aman kembali ke IE7:

Semoga ini terbukti bermanfaat bagi seseorang.

Di sini, miliki Fiddle;)

    <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            height: 100px;
            border-bottom: 1px solid #ddd;
        }

        div:nth-child(even) {
            background: #CCC
        }

        div:nth-child(odd) {
            background: #FFF
        }

    </style>
</head>

<body>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</body>

<script type="text/javascript">
console.log("Doc Height = " + document.body.offsetHeight);
console.log("win Height = " + document.documentElement.clientHeight);
window.onscroll = function (ev) {
    var docHeight = document.body.offsetHeight;
    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;

    var winheight = window.innerHeight;
    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;

    var scrollpoint = window.scrollY;
    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;

    if ((scrollpoint + winheight) >= docHeight) {
        alert("you're at the bottom");
    }
};
</script>
</html>

Jika Anda mengatur height: 100%beberapa wadah <div id="wrapper">, maka kode berikut berfungsi (diuji di Chrome):

var wrapper = document.getElementById('wrapper');

wrapper.onscroll = function (evt) {
  if (wrapper.scrollTop + window.innerHeight >= wrapper.scrollHeight) {
    console.log('reached bottom!');
  }
}

window.onscroll = function(ev) {
    if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) {
        alert("you're at the bottom of the page");
    }
};

Jawaban ini akan memperbaiki kasus tepi, hal ini dikarenakan pageYOffsetadalah doublesementara innerHeightdan offsetHeightyanglong , jadi ketika browser memberikan info, Anda mungkin pendek pixel. Misalnya: di bagian bawah halaman yang kita miliki

benar window.innerHeight = 10.2

benar window.pageYOffset = 5.4

benar document.body.offsetHeight = 15.6

Perhitungan kami kemudian menjadi: 10 + 5,4> = 16 yang mana salah

Untuk memperbaiki ini bisa kita lakukan Math.ceilpadapageYOffset nilai.

Semoga itu bisa membantu.

jika Anda suka jquery

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() >= $(document).height()) {
    // doSomethingHere();
  }
});

Anda dapat melihat gulir tak terbatas jquery:

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

Yang sepertinya melakukan apa yang Anda minta, dengan asumsi Anda bersedia menggunakan perpustakaan jquery dan tidak berharap untuk metode JS murni yang ketat.

Anehnya tidak ada solusi yang bekerja untuk saya. Saya pikir itu karena saya csskacau, dan bodytidak membungkus semua konten saat menggunakan height: 100%(belum tahu mengapa). Namun saat mencari solusi saya telah datang dengan sesuatu yang baik ... pada dasarnya sama, tapi mungkin ada baiknya untuk melihat - Saya baru ke pemrograman jadi maaf jika itu melakukan lebih lambat yang sama, kurang didukung atau sesuatu seperti bahwa...

window.onscroll = function(evt) {
  var check = (Element.getBoundingClientRect().bottom - window.innerHeight <= 0) ? true : false;
  if (check) { console.log("You're at the bottom!"); }
};

$(document).ready(function(){
    $('.NameOfYourDiv').on('scroll',chk_scroll);
});

function chk_scroll(e)
{
    var elem = $(e.currentTarget);
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) 
    {
        alert("scrolled to the bottom");
    }

}

const handleScroll = () => {
    if (Math.round(window.scrollY + window.innerHeight) >= Math.round(document.body.scrollHeight)) {
        onScroll();
    }
};

Kode ini juga berfungsi untuk saya di Firefox dan IE.

Menggunakan defaultViewdan documentElementdengan cuplikan kode fungsional tertanam:

const { defaultView } = document;
const { documentElement } = document;
const handler = evt => requestAnimationFrame(() => {
  const hitBottom = (() => (defaultView.innerHeight + defaultView.pageYOffset) >= documentElement.offsetHeight)();
  hitBottom
    ? console.log('yep')
    : console.log('nope')
});
document.addEventListener('scroll', handler);

<pre style="height:110vh;background-color:fuchsia">scroll down</pre>

Anda dapat memeriksa apakah hasil gabungan dari ketinggian jendela dan gulir atas lebih besar daripada tubuh

if (window.innerHeight + window.scrollY >= document.body.scrollHeight) {}

Saya harus menemukan cara (di Jawa) untuk secara sistematis gulir ke bawah mencari komponen yang saya tidak tahu XPath yang benar (cerita panjang, jadi mainkan saja). Seperti yang baru saja saya nyatakan, saya perlu menggulir ke bawah sambil mencari komponen dan berhenti baik ketika komponen itu ditemukan atau bagian bawah halaman tercapai.

Cuplikan kode berikut mengontrol gulir ke bawah ke bagian bawah halaman:

JavascriptExecutor js = (JavascriptExecutor) driver;
boolean found = false;
long currOffset = 0;
long oldOffset = 0;
do
{
    oldOffset = currOffset;
    // LOOP to seek the component using several xpath regexes removed
    js.executeScript("window.scrollBy(0, 100)");
    currOffset = (Long)js.executeScript("var offset = window.window.pageYOffset; return offset;");
} while (!found && (currOffset != oldOffset));

By the way, jendela dimaksimalkan sebelum potongan kode ini dieksekusi.

Jawaban yang diterima tidak berhasil untuk saya. Ini berhasil:

const element = document.createElement('div');
document.body.appendChild(element);
document.addEventListener('scroll', () => {
    const viewportHeight = window.innerHeight;
    const distance = element.getBoundingClientRect().top;
    if (Math.floor(distance) <= viewportHeight) {
        console.log('yep')
    } else {
        console.log('nope')
    }
})

Dua solusi yang saya temukan bekerja untuk saya:

  window.addEventListener('scroll', function(e) {
    if (
      window.innerHeight + document.documentElement.scrollTop ===
      document.documentElement.offsetHeight
    ) {
      console.log('You are at the bottom')
    }
  })

Dan lainnya:

  window.addEventListener('scroll', function(e) {
    if (
      window.innerHeight + window.pageYOffset ===
      document.documentElement.offsetHeight
    ) {
      console.log('You are at the bottom')
    }
  })