Eksperimen Infinite Scroll dengan JSON Blogger
Eksperimen membuat infinite scroll dengan JSON Blogger. Sebuah sistem yang akan memperbaharui jumlah item posting setiap kali pengguna mencapai batas akhir layar ketika pengguna sedang menggulung halaman. Metode ini sebenarnya sudah pernah Saya tuliskan di sini. Saya mengganti kondisional batas akhir yang tadinya berupa perbandingan antara tinggi kontainer dengan batas akhir gulungan area seperti ini:
container.onscroll = function() {
if ((this.scrollTop + this.offsetHeight) == inner.offsetHeight) {
myFunction();
}
};
Menjadi berdasarkan perbandingan antara tinggi layar dengan batas akhir gulungan layar seperti ini:
window.onscroll = function() {
if (navigator.userAgent.toLowerCase().indexOf("chrome") > -1 || navigator.userAgent.toLowerCase().indexOf("safari") > -1) {
if (document.documentElement.scrollHeight == (document.body.scrollTop + document.documentElement.clientHeight)) {
myFunction();
}
} else {
if (document.documentElement.scrollHeight == (document.documentElement.scrollTop + document.documentElement.clientHeight)) {
myFunction();
}
}
};
Selengkapnya mengenai potongan kode untuk mengecek batas akhir gulungan layar bisa Anda baca di sini.
Silakan dipelajari dan dimodifikasi sesuka hati Anda dengan mengikuti persetujuan yang Saya tuliskan di dalam kode sumbernya. Eksperimen ini akan diperbaharui jika memang ada yang perlu diperbaharui. Begitu.
16 Komentar
Unknown
sejenis load more post tapi versi scroll.. :)
Beben Koben
yang repotnya kalo arsip sudah sampe 10 tahunan, ampe kapan kita mau scroll2an :D
gimana kalo ditambahin links arsip \o/
Beben Koben
napigasi gito loh :)
Anonim
emang lebih cocok kalo di terapkan di arsip.. :D
Anonim
ini kayak daftar isinya blog ini :D
Beben Koben
eksperimen tp sudah ada di daptar isi ternyata :D
Taufik Nurrohman
Kalau yang di daftar isi, pemuatan ulang terjadi saat pengguna mengeklik tombol. Kalau yang ini cuma berdasarkan perhentian gulungan sampai di batas akhir layar.
Randy
lama gak nongol disni udah byk aja kemajuan didunia koding, wah keknya mantap law buat arsip ya bang?
Sodikin Kurniawan
Wah saya sudah pelajari.. tapi saya masih bingung buat nerapin di blog dengan mengganti scrooll dengan tombol.. atau meganti blog-pager dengan fungsi seperti ini mohon pencerahannya atau mungkin ditulisakan di artikrl berikutnya bang taufik.. makasih.
Taufik Nurrohman
Pakai plugin Infinite Ajax Scroll ⇒ http://www.thesimplexdesign.com/2013/02/infinite-scrolling-or-load-more-effect.html
Sodikin Kurniawan
Oke bang makasih.. saya ke tkp dulu...
Unknown
Mas taufik... kalau seperti kAPAN LAGI.COM gimana ya....?
Niaga88
Gan, ane sangat frustasi dengan infinite scroll ini. Dah puluhan kali coba ga pernah berhasil. Ga tau masalahnya dimana... :(
najatulwan
Kalo yang versi load more post ada ?
Giri Diwa Adam
bisa langsung di gunakan di blogger gan ??
lutfiyah
Asumsikan kita punya 10 blog dari Blogger. Dari 10 blog tersebut, dapatkan kita ambil data json dari semuanya, untuk kemudian kita parse bersama-sama (menyeluruh) berdasarkan urutan tanggal posting dari semua blog berjumlah 10 tersebut, dan kita tampilkan sebagai markup html di satu halaman tertentu, misalnya hanya judul, url gambar pertama, potongan artikel, tanggal posting, dan/atau label--kesemuanya tampil sebagai markup html berdasarkan waktu posting setiap blog. Jika ini (maksudnya, mengambil dan parse json dari 10 blog berbeda dan menampilkan pada satu halaman, baik secara infinit skrol atau even klik) dimungkinkan, barangkali akan bermanfaat bagi pengguna Blogger yang suka bereksperimen.