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.
javascript
jquery
scroll
pagination
Johnny
sumber
sumber
Jawaban:
Gunakan
.scroll()
acara padawindow
, seperti ini: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:Anda dapat menguji versi itu di sini , sesuaikan
100
saja dengan piksel apa pun dari bagian bawah yang ingin Anda picu.sumber
console.log()
alih - alih waspada itu kadang mengulangi perintah.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 :
di tempat
$(document).height()
, sehingga kode terakhir adalah:sumber
min
daripadamax
, terutama jika ada margin, untuk menghindari secara tidak sengaja mencegah pengguna dari menggulir ke apa yang Anda pikir adalah bagian bawah halaman.Saya tidak yakin mengapa ini belum diposting, tetapi sesuai dokumentasi dari MDN , cara paling sederhana adalah dengan menggunakan properti javascript asli:
Mengembalikan nilai true ketika Anda berada di bagian bawah elemen yang dapat digulir. Jadi cukup gunakan javascript:
scrollHeight
memiliki dukungan luas di browser, mulai dari 8 hingga lebih tepatnya, sementaraclientHeight
danscrollTop
keduanya didukung oleh semua orang. Bahkan ie 6. Ini harus lintas browser aman.sumber
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).200.181819304947
Dan200
). Saya menambahkanMath.floor()
untuk membantu menangani itu, tetapi saya tidak tahu seberapa andal ini.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
,,scrollTop
danclientHeight
semuanya 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.Bagi mereka yang menggunakan solusi Nick dan mendapatkan peringatan / peristiwa berulang, Anda bisa menambahkan baris kode di atas contoh peringatan:
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.
sumber
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 :
sumber
Jawaban Nick Craver perlu sedikit dimodifikasi agar berfungsi di iOS 6 Safari Mobile dan harus:
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 menggunakanwindow.innerHeight
tidak.Catatan :
window.innerHeight
Properti 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.innerHeight
properti di sinisumber
Inilah pendekatan yang cukup sederhana
const didScrollToBottom = elm.scrollTop + elm.clientHeight == elm.scrollHeight
Contoh
Di mana
elm
elemen diambil dari misdocument.getElementById
.sumber
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 ...
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:
Saya harap ini akan menghemat waktu seseorang.
sumber
var docElement = document.documentElement; var winElement = window
winElement.pageYOffset
Anda juga bisa menggunakanwinElement.scrollY
.Silakan periksa jawaban ini
Anda dapat melakukannya
footerHeight - document.body.offsetHeight
untuk melihat apakah Anda berada di dekat footer atau mencapai footersumber
Ini menghitung scroll bar jarak ke bagian bawah elemen. Sama dengan 0, jika bilah gulir telah mencapai bagian bawah.
sumber
Ini adalah dua sen saya:
sumber
$(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight
=>$(this).scrollTop() + $(this).outerHeight(true) >= $(this)[0].scrollHeight
Pure JS dengan cross-browser dan debouncing ( Performa cukup bagus )
Demo: http://jsbin.com/geherovena/edit?js,output
PS:
Debouncer
,getScrollXY
,getDocHeight
tidak ditulis oleh sayaSaya hanya menunjukkan cara kerjanya, Dan bagaimana saya akan melakukannya
sumber
Solusi saya di js polos:
sumber
Coba ini untuk kondisi yang cocok jika gulir ke ujung bawah
sumber
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.
sumber
Anda dapat mencoba kode berikut,
sumber
Ini memberikan hasil yang akurat, ketika memeriksa elemen yang dapat digulir (yaitu tidak
window
):offsetHeight
harus memberikan tinggi nyata elemen yang terlihat (termasuk padding, margin, dan scrollbar), danscrollHeight
merupakan keseluruhan tinggi elemen termasuk area yang tidak terlihat (meluap).jQuery
's.outerHeight()
harus memberikan hasil yang serupa dengan JS ini.offsetHeight
- dokumentasi di MDN untukoffsetHeight
tidak jelas tentang dukungan lintas-browser. Untuk membahas lebih banyak opsi, ini lebih lengkap:sumber
Math.floor(element.scrollTop) === element.scrollHeight - element.offsetHeight
kalau-kalau scrollTop adalah desimal yang tidak akan bekerja tanpaMath.floor()
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:
sumber
Inilah dua sen saya karena jawaban yang diterima tidak berhasil untuk saya.
sumber
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 .
sumber
.observe(...)
pendengar acara seperti ketika pengguna mengarahkan / menyentuh wadah gulir Anda sehingga tidak akan langsung terpicu.Biarkan saya menunjukkan pendekatan tanpa JQuery. Fungsi JS sederhana:
Contoh singkat cara menggunakannya:
sumber
Saya menggunakan @ddanone menjawab dan menambahkan panggilan Ajax.
}
sumber
Untuk menghentikan peringatan berulang dari jawaban Nick
sumber
Google Chrome memberikan ketinggian penuh halaman jika Anda menelepon
$(window).height()
Sebagai gantinya, gunakan
window.innerHeight
untuk mengambil ketinggian jendela Anda. Pemeriksaan yang diperlukan harus:sumber
Ternyata yang berhasil bagi saya adalah 'tubuh' dan bukan 'jendela' seperti ini:
untuk penggunaan kompatibilitas lintas-browser:
lalu alih-alih $ (dokumen) .height () panggil fungsi getheight ()
untuk penggunaan dekat bawah:
sumber