Logging

ページ無限スクロールの作り方 #インフィニティ#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();
        }
    });
}








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

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

    関連記事

    1. Logging

      有難う🎉一年と七ヶ月と二十九日😌で達成。

      おはようございます、御機嫌よう😋。アイキャッチー画像とタイト…

    2. Logging

      Yahooが567(コロナ)の情報を取り扱っているそれも県単位でURLまとめたよ。

      Yahooが567の情報を取り扱っている。567(コロナ)を県単位で…

    3. Logging

      TinyMCE 5.0でオリジナルプラグイン作成するはググれば何とかなるが?

      TinyMCE 5.0で独自のプラグインを開発するにあたってググ…

    4. Logging

      WordPressのメディアライブラリについて愚痴る。

      過去のデータベースを引き継いでいればメディアライブラリのデータは壊れ…

    5. Logging

      HUNTERxHUNTERの文字が生成できるサービスを作りましたよ。

      今日はお昼ぐらいから、天気が良くなりましたね、、昨日はどんよりしてい…

    6. Logging

      自動車税がタックス(tax)め!!

      自動車税の用紙が届いた・・・・。高い・・・。PS4が軽く買えちゃ…

    2022年9月
     1234
    567891011
    12131415161718
    19202122232425
    2627282930  

    カテゴリー

    アーカイブ

    PAGE TOP