記録

ページ無限スクロールの作り方 #インフィニティ#InfinityPageScroll #JavaScript

おはようございます、台風14号が過ぎ去ってからいきなり秋模様ですね🫠。

さて、先日ツイートしたページ無限ループが出来るJavaScriptコードを書きました。これを作ろうと思ったキッカケは、自分が運営しているWordPressサイトに巷のページ無限スクロールプラグインが尽く(ことごとく)使用出来なかったので自分で自作した訳です。因みにページ無限スクロールプラグインとはページを送りをしなくてもページの最下までスクロールすると次頁を読み込んでくれるプラグインの事を指します。

下記のコードは自サイト専用なのでそのまま使用することは出来ませんが、重要な部分だけ抜き取って再利用すれば、独自のページ無限ループに対応することは可能かと思います。

コードを読んで頂ければ分かることですが、重要なポイントはページを読み込む方法とそれをDomに変換する方法だと思います。まず、ページを読み込む方法は下記のファンクションで可能です。

fetch(next_url).then(
                response => response.text()
            ).then(data => {

そしてDomに置き換えている所はこの部分になります。これら2つの箇所が重要になります。

                const parser = new DOMParser();
                const doc = parser.parseFromString(data, 'text/html');

これらの事に注意して独自コードを書いてみてください。最後に全コードを記載しときます。


let cnt = 2;
let blk = 0;
async function nextpage() {
    if (cnt !== blk) {
        blk = cnt;
        await (async () => {
            let next_url = "https://fox-black.com/blog/page/" + cnt;
            return await fetch(next_url).then(
                response => response.text()
            ).then(data => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(data, 'text/html');
                let blogs = doc.querySelectorAll('.blogpage');
                cnt++;
                if (blogs[0].innerHTML !== undefined) {
                    document.querySelector(".foxpage").insertAdjacentHTML("beforeend", (function (elm) {
                        let str = "";
                        for (const key in elm) {
                            const element = elm[key];
                            if (element.innerHTML !== undefined) {
                                str += "<div class=\"blogpage\">" + element.innerHTML + "</div>";
                            }
                        }
                        return str;
                    })(blogs));
                } else {
                    if (document.querySelector("#fin") === null) {
                        document.querySelector(".foxpage").insertAdjacentHTML("beforeend", "<div id=\"fin\"></div>");
                    }
                }
            }).catch(error => {
                if (document.querySelector("#fin") === null) {
                    document.querySelector(".foxpage").insertAdjacentHTML("beforeend", "<div id=\"fin\"></div>");
                }
            });
        })();
    }
}

if (navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
    window.addEventListener("scroll", async function () {
        let s = (() => {
            let tgt;
            if ('scrollingElement' in document) {
                tgt = document.scrollingElement;
            } else if (this.browser.isWebKit) {
                tgt = document.body;
            } else {
                tgt = document.documentElement;
            }
            return tgt;
        })();
        if (document.querySelector("#fin") === null && s.scrollTop >= (s.clientHeight - 650)) {
            await nextpage();
        }
    });
} else {
    document.querySelector(".foxpage").addEventListener("scroll", async function () {
        if (document.querySelector("#fin") === null && document.querySelector(".foxpage").scrollTop >= (document.querySelector(".foxpage").scrollHeight - 300)) {
            await nextpage();
        }
    });
}




【DMM FX】口座開設のお申込みはこちら


OFUSEで応援を送る

実写映画化されたヘルドッグスを観ましたよ。#実写映画化 #漫画 #小説前のページ

ハローワークの求人番号からバーコード生成印刷。#php #WEBサービス次のページdeliveryman scanning the barcode

関連記事

  1. 記録

    高知県の山田高校が作った高校三年生の山田まんを食べてみた。 #山田まん

    高知県の山田高校(高知県立山田高等学校)が作った(発案企画など)高…

  2. 記録

    弱いひと。被験者。加害者。

    被害者Aさん、談話より抜粋:被験者と加害者。加害者はざっくり言…

  3. white clouds

    記録

    映画、トップガン マーヴェリックを観に行きました。感想を。

    おはようございます。華の金曜日(死語)、仕事帰りに映画を観に行きまし…

  4. 記録

    田舎は不便でもとか言いますが。

    田舎は不便でもとか言いますが、それは違いますとはいえない。交通の便…

  5. 記録

    会社辞めてきたwおい!

    会社辞めてきたwおい!40代無職に戻りました・・・ありえんわ。呆れる…

  6. 記録

    映画、エベレスト3Dを観てきましので感想なんかを。 #映画レビュー #エベレスト3D

    映画、エベレスト3Dを観てきましので感想なんかを残しときます。この映…

2022年9月
 1234
567891011
12131415161718
19202122232425
2627282930  

カテゴリー

PAGE TOP