Eksperimen Infinite Scroll dengan JSON Blogger

Blogger Infinite Scroll Experiment
Blogger Infinite Scroll Experiment

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

Lihat Demo

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.

  • 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.

Komentar telah ditutup.