WordPressの質問（q10255357）の続

質問

クライアント側の3番についてお聞きしたいのですが、1週間で質問をリセットする場合こちらは必要なくなるのでしょうか？
データベースの容量から考えて定期的に質問を削除するように考えております。
4番の画像ファイルというのは画像、動画、PDF それぞれにあったタグに Javascript で変更するということでしょうか？

サーバー側のコードは bbs_que_list.php を想定しております。

※最新コード
https://wandbox.org/permlink/a5reYrjPHQnrGXXi

回答No.36

dell_OK · ベストアンサー

・見落としておりました申し訳ありません。

当時のfunctions.phpをそのまま使ってもだめです。
途中で、以下の変更が入りましたよね。
ここは変更しておいてください。
$result['items'][] = ['title' => $row->title, 'img1' => $url, 'type' => $type, 'url' => home_url('質問みる?'.$row->unique_id)];

・console に書いてあるエラーの読み方が分からず教えて頂きたいです。

どのようなエラーが出ていますか。

お礼

こちらが最新の回答になります。
質問の期限が切れてしまいました、下記のリンクからアドバイスよろしくお願い致します。

https://okwave.jp/qa/q10271965.html

補足

A.回答ありがとうございます。
過去の回答は見たつもりだったのですが変更点が抜けておりました申し訳ありません…
Uncaught ReferenceError: group_id is not defined　と書かれておりエラー文を調べようと思ったのですが、該当箇所が分からずどこを修正すべきなのか分かりませんでした。

※表示されているエラー文
➀jQuery.Deferred exception: group_id is not defined ReferenceError: group_id is not defined
at add (http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%80%80%e8%b3%aa%e5%95%8f%e4%b8%80%e8%a6%a7%e8%a1%a8%e7%a4%ba%e7%94%bb%e9%9d%a2/:130:32)
at HTMLDocument.<anonymous> (http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%80%80%e8%b3%aa%e5%95%8f%e4%b8%80%e8%a6%a7%e8%a1%a8%e7%a4%ba%e7%94%bb%e9%9d%a2/:118:9)
at e (http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js?ver=6.5.5:2:30005)
at t (http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js?ver=6.5.5:2:30307) undefined

➁Uncaught ReferenceError: group_id is not defined
at add (雑談掲示板　質問一覧表示画面/:130:32)
at HTMLDocument.<anonymous> (雑談掲示板　質問一覧表示画面/:118:9)
at e (jquery.min.js?ver=6.5.5:2:30005)
at t (jquery.min.js?ver=6.5.5:2:30307)

※該当ページ
http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%80%80%e8%b3%aa%e5%95%8f%e4%b8%80%e8%a6%a7%e8%a1%a8%e7%a4%ba%e7%94%bb%e9%9d%a2/

回答No.15

dell_OK

・初めの10件で無限スクロールが終わるようにされていると思うのですが、最初の10件を除いてその後から無限スクロールを実装するようなデザインで考えられてますでしょうか？

そうですね。
たぶんそんな感じだと思います。

回答No.14

dell_OK

・bbs_que_list.php の12行目から44行目までを非同期通信で書くことが難しくどうすべきか悩んでおります…

非同期でデータを取得する処理は完成しているので　bbs_que_list.php　にはまだ手を加えないでください。
PHPコードは　get_header();　だけだと思います。

データベースからデータを取得するのは、非同期で呼び出されている　functions.php　です。
データを固定で出力していたところをデータベースを参照するようにしてみます。
これでデータベースから取得してきたタイトルが表示されるか確認してみてください。
画像のパスについては後回しにして、とりあえず質問ＩＤを出力しておきます。
－－－－
function bbs_que_list_items()
{
global $wpdb;
$count = $_POST['count'];
$sql = 'SELECT * FROM sortable LIMIT %d,10';
$query = $wpdb->prepare($sql, $count);
$rows = $wpdb->get_results($query);
$result = [];
foreach ($rows as $row) {
$result['items'][] = ['title' => $row->title, 'img1' => '画像'.$row->ID];
}
echo json_encode($result);
exit;
}
－－－－

補足

Q.非同期でデータを取得する処理は完成しているので　bbs_que_list.php　にはまだ手を加えないでください。
PHPコードは　get_header();　だけだと思います。

A.回答ありがとうございます。了解いたしました。

Q.データベースからデータを取得するのは、非同期で呼び出されている　functions.php　です。

A.アドバイスありがとうございます。
別途ファイルを用意する方法を考えておりましたが、functions.php なら header で読み込まれるので的確ですね…
初めの10件で無限スクロールが終わるようにされていると思うのですが、最初の10件を除いてその後から無限スクロールを実装するようなデザインで dell_ok さんは考えられてますでしょうか？

functions.phpの183行目に function bbs_que_list_items(){} を追加いたしました。
bbs_que_list.phpのコードを修正いたしました。

※最新コード
https://wandbox.org/permlink/Er1MfwlTwcsKAoDN

回答No.13

dell_OK

・無限スクロールになっておりますでしょうか？

なっていますね。

そちらの添付画像を見ると縦スクロールバーが表示されているので、
無限スクロールになっていてもおかしくない気がします。
ブラウザの高さをもう少しせまくしてみるとどうなりますか。

補足

回答ありがとうございます。
コンテンツ全体に高さを設定したところスクロール表示されました。

div#content {
height: 500px;
}

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

無限スクロールが確認できたので、回答No.8 の補足に書いたように現在表示されているコンテンツをデータベースのものに置き換えていきたいのですが、bbs_que_list.php の12行目から44行目までを非同期通信で書くことが難しくどうすべきか悩んでおります…

※参考サイト
※WordPress の Ajax 処理で fetch を使う方法１
https://celtislab.net/archives/20180727/ajax-fetch/

※方法2
http://web.mt-systems.jp/archives/1179

※SQL のデータを Ajax で表示
https://webcake.stars.ne.jp/jquery-ajax-php-json-sample.html

※最新コード（dell_okさんのコードはsample.phpに書いております）
https://wandbox.org/permlink/L3vLoCmJHP931Wnw

※考えたコード
<?php
/*
Template Name: que_list
固定ページ: 質問一覧画面
*/
get_header();
// POSTメソッドでリクエストした値を取得
$count = $_POST['count'];
// nullで初期化
$productList = null;
$sql = 'SELECT * FROM sortable';
$query = $wpdb->prepare($sql);
$rows = $wpdb->get_results($query);
$upload_dir = wp_upload_dir();

//UrlSearchParams を使った時の Content-Type は、application/x-www-form-urlencoded;charset=UTF-8になる
const params = new URLSearchParams();
//アクションフック
params.append('action', 'ajax_func');

// あらかじめ配列$productListを作成する
// 受け取ったデータを配列に代入する
// 最終的にhtmlへ渡される
$productList = array();

for ($i = 0; $i < 10; ++$i) {
++$count;
$productList['items'][] = ['title' => 'タイトル'.$count, 'ID' => '画像'.$count];
}
// 取得したデータを配列に格納
while ($rows as $row = $query->fetchObject())
{
$productList[] = array(
'ID'=> $row->id
,'title' => $row->title
);
}

// JSON形式で出力する
header('Content-Type: application/json');
echo json_encode( $productList );
exit;
?>

<script>
var count = 0;
$(function() {
add()
$(window).on("scroll", function() {
if ($(window).scrollTop() + $(window).height() >= $("html").height()) {
add()
}
})
});

function add() {
//FormDataオブジェクトのアクションフック
const formData = new FormData();
//formData.append("action", "アクション名");
formData.append("action", "bbs_que_list_items");
formData.append("count", count);
const opt = {
method: "post",
// 通信先ファイル名 (bbs_que_list.php内に書く場合いらない)
//url: "bbs_que_list.php",
// 受け取りデータの種類
//datatype: "json",
body: formData
}
fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt)
.then(response => {
return response.json();
})

.then(json => {
//.jsonファイルの読み取りに成功したら、使用するデータjson()を解析し、それらの値をリスト項目に追加してデータとして表示
//lengthで文字列や配列の長さを取得
//応答本体に items プロパティがある
for (let idx = 0; idx < json.items.length; idx++) {
count++;
const item = json.items[idx];
content =
"<div>" + item.id + "</div>" +
"<div>" + item.title + "</div>";
$("#content").append(content);
}
})

.catch(error => {
console.log(error);
});
};
</script>

回答No.12

dell_OK

jQueryのロードコードはヘッダーに出力されるはずです。
ヘッダー出力していない場合は、
以下のどちらかでヘッダー出力してみてください。
　wp_head();
　get_header();

補足

アドバイスありがとうございます。
get_header(); を追加したところ表示することが出来ました。
こちらの環境ではスクロールされずにコンテンツが10件表示されているのですが、dell_ok さんから見ると無限スクロールになっておりますでしょうか？

※表示画面
https://imgur.com/tkiUJ72.png

※質問一覧表示画面
http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%80%80%e7%99%bb%e9%8c%b2%e7%b5%90%e6%9e%9c%e7%94%bb%e9%9d%a2/

回答No.11

dell_OK

エラーを確認してみました。
　Uncaught ReferenceError: $ is not defined
$が認識されていないようです。
$はjQueryコードの始まりに使われていたりします。
なのでjQueryの読み込みがされていないのかもしれないですね。
そうであればjQueryを読み込むようにしてみてください。

$はjQueryで一般的な書き方だとは思いますが、
他のライブラリを使ったりするとたちまち使えなくなってしまうことがあるようです。
https://www.conoha.jp/lets-wp/wp-jquery/
「$マークを使っている」

他の原因として、「wp_head()が競合している」に書かれていますが、
jQueryを２回読み込んでもエラーになるかもしれません。

補足

アドバイスありがとうございます。
Wordpress で jQuery を読み込む場合特殊だった気がするので、調べなおしてみました。
参考サイトをみながら修正してみたのですが同じエラーが表示されております。
wordpress ではデフォルトで内蔵の jQuery を読み込むため使えない原因が分からないのですが、その他に考えられることはありますでしょうか？

※参考サイト
※WordPressでjQueryを読み込む方法
https://tcd-theme.com/2024/01/wp-jquery.html

※WordPressでjQueryを利用する際の書き方と注意点
https://webst8.com/blog/wordpress-jquery/

※修正コード
var count = 0;
jQuery(function($) {
add()
$(window).on("scroll", function() {
if ($(window).scrollTop() + $(window).height() >= $("html").height()) {
add()
}
})
});

回答No.10

dell_OK

・添付画像が見えず確認できず

画像を添付し忘れました。
私のサンプルサイトでも確認してみてください。
何も表示されていない場合は、JavaScriptでエラーが発生しているかも知れませんので、
コンソールを確認してみてください。

・並べ方はデザイン参考サイトのように1行で4コンテンツ×2を考えております。

質問者さまの画面では1行で4コンテンツ×2かも知れませんが、
私の画面では、４コンテンツ×３行だったり、５コンテンツ×３行だったりです。
横幅が広い場合に、コンテンツ数を４固定にするのか、表示可能なだけ表示するのか、
そのあたりはスタイルシートで調整することになると思います。
反対に横幅が狭い場合にどうするかも考えましょう。
参考サイトでは少なくとも最小で４にしているようで、
狭いと横スクロールバーが表示されました。
このように表示媒体や表示領域によって変化することを考えておきましょう。

補足

Q.何も表示されていない場合は、JavaScriptでエラーが発生しているかも知れませんので、
コンソールを確認してみてください。

A.アドバイスありがとうございます。確認したところ下記のようなエラーが表示されておりました。
参照している変数が存在しないという事だと思うのですが、 function add() {} を $(function() {} より後に書いているからでしょうか？
dell_ok さんが用意してくださったサンプルサイト確認いたしました。想像している形と同じものだと思われます。

※エラー文
ReferenceError: $ is not defined
at $(function() {

※該当ページ
http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%80%80%e7%99%bb%e9%8c%b2%e7%b5%90%e6%9e%9c%e7%94%bb%e9%9d%a2/

Q.質問者さまの画面では1行で4コンテンツ×2かも知れませんが、
私の画面では、４コンテンツ×３行だったり、５コンテンツ×３行だったりです。

反対に横幅が狭い場合にどうするかも考えましょう。
参考サイトでは少なくとも最小で４にしているようで、
狭いと横スクロールバーが表示されました。
このように表示媒体や表示領域によって変化することを考えておきましょう。

A.アドバイスありがとうございます。
dell_ok さんの環境では3行で表示されているんですね、失礼いたしました。
参考サイトのように狭い場合は横スクロールで良いと考えております。

横幅が広い場合は1列のコンテンツ数を増やすのが自然だと思いました。
拡大してコンテンツ数を維持する方法を想像してみたのですが、以前 dell_ok さんからアドバイスを頂いたように画像が横に間延びしているようでデザインを考慮するとマイナスな気がしております。

回答No.9

dell_OK

・確認したかったのですが何も表示されず見れておりません。

何も表示されませんでしたか。
私の方では添付画像のように表示されています。

見れていないと説明してもわかりづらいかもしれませんが先に説明しておきます。
ブラウザの高さが広いために１０件ではスクロールすることができないので続きは表示されません。
ブラウザの高さをせまくしてスクロールバーが表示されてからスクロールすると無限スクロールが始まります。
最初の表示でスクロールバーが表示されなかった場合は無限スクロールができないため、
スクロールバーが表示されるために必要な件数分を表示しなければいけません。
それが何件になるかは最大のブラウザの表示領域の高さを考慮する必要があります。

考え方のひとつとして、
一般的なディスプレイまたはイラストを描く人が使っているディスプレイで解像度が最大のものを調べ、
なおかつそれを縦長モードにした場合で考えるといいような気がします。
こちらの一覧から、「黄色は過去を含め主流とされた画面モードを示す。」を見ると、
https://ja.wikipedia.org/wiki/%E7%94%BB%E9%9D%A2%E8%A7%A3%E5%83%8F%E5%BA%A6
４Ｋと８Ｋを除くと、「WQHD (Wide Quad-HD),1440p」が最大のようです。
その解像度は横2560px縦1440となっていますが、縦長モードにすると縦が2560pxとなります。
１コンテンツの高さpxを決めて、2560pxを割った数を最初の件数とすれば、
スクロールバーを表示するには十分かと思います。

他には、私の想像なので実現可能かどうかわかりませんが、
とりあえず１０件表示して、その時にスクロールバーを表示するには十分な件数でなかったら、
次の１０件を表示、を繰り返す方法です。
こちらの方が先の方法よりも確実な気はします。

・データベースから出力するコードを書いてみました。

それは、functions.phpに記述します。
私がなぜいまだにそこにふれないでいるかというと、
無限スクロールに成功してから、その部分を実装して欲しいからです。
一度に全部やってうまくいけばいいですが、
そうでない場合は、不具合の個所を探すのが大変になります。
無限スクロールの部分が動く状態にしておき、
そのコードに不具合がないと自分で確定できていれば、
データベースを参照することになっても、
そこを変更する必要はないですし、
データベースを参照することで不具合が発生しても、
そこにはひとまず原因がないと想定して、
追加部分のコードの見直しから始めればいいからです。

補足

Q.何も表示されませんでしたか。
私の方では添付画像のように表示されています。

A.回答ありがとうございます。添付画像が見えず確認できず申し訳ありません…
XAMPP のローカル環境でも試してみたのですが、何も表示されず原因が分からない状態です。

Q.ブラウザの高さが広いために１０件ではスクロールすることができないので続きは表示されません。
ブラウザの高さをせまくしてスクロールバーが表示されてからスクロールすると無限スクロールが始まります。

A.解説ありがとうございます。ブラウザの高さが広くて、無限スクロールが開始されないとかあるんですね…

Q.一般的なディスプレイまたはイラストを描く人が使っているディスプレイで解像度が最大のものを調べ、
なおかつそれを縦長モードにした場合で考えるといいような気がします。

A.アドバイスありがとうございます。並べ方はデザイン参考サイトのように1行で4コンテンツ×2を考えております。

※デザイン参考サイト
https://www.bilibili.com/

Q.他には、私の想像なので実現可能かどうかわかりませんが、
とりあえず１０件表示して、その時にスクロールバーを表示するには十分な件数でなかったら、
次の１０件を表示、を繰り返す方法です。
こちらの方が先の方法よりも確実な気はします。

A.アドバイスありがとうございます。
提案してくださった方法が可能であれば一番良さそうですね。

Q.無限スクロールに成功してから、その部分を実装して欲しいからです。

A.回答ありがとうございます。失礼いたしました。
dell_ok さんに無限スクロールと非同期通信についてのコードをまとめてサンプルコードにして頂いたので、データベースのコードを追加後に合体させて完成に近付けようと考えておりました…

回答No.8

dell_OK

・要素の追加についてお聞きしたいのですが参考サイトの16行目の function add(firstIndex){} を非同期通信に書き換えるという事でしょうか？

そうですね。
この関数の中で非同期処理をするといいと思います。

改めて参考サイトのコードを元に私のサンプルを直してみたところなんとなくうまく動作できているような気がするので、確認してみてください。
データはまだ固定で出力していますが、非同期処理を追加したコードはこんな感じです。

bbs_que_list.php
－－－－
<div id="content"></div>
<script>
var count = 0;
$(function() {
add()
$(window).on("scroll", function() {
if ($(window).scrollTop() + $(window).height() >= $("html").height()) {
add()
}
})
});

function add() {
const formData = new FormData();
formData.append("action", "bbs_que_list_items");
formData.append("count", count);
const opt = {
method: "post",
body: formData
}
fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt)
.then(response => {
return response.json();
})
.then(json => {
for (let idx = 0; idx < json.items.length; idx++) {
count++;
const item = json.items[idx];
content =
"<div>" + item.img1 + "</div>" +
"<div>" + item.title + "</div>";
$("#content").append(content);
}
})
.catch(error => {
console.log(error);
});
};
</script>
－－－－

functions.php
－－－－
function bbs_que_list_items()
{
$count = $_POST['count'];
$result = [];
for ($i = 0; $i < 10; ++$i) {
++$count;
$result['items'][] = ['title' => 'タイトル'.$count, 'img1' => '画像'.$count];
}
echo json_encode($result);
exit;
}
add_action('wp_ajax_bbs_que_list_items', 'bbs_que_list_items');
add_action('wp_ajax_nopriv_bbs_que_list_items', 'bbs_que_list_items');
－－－－

補足

サンプルコードありがとうございます。
確認したかったのですが何も表示されず見れておりません。データベースから出力するコードを書いてみました。
コードを参考サイトを見ながら書いてみたのですが、画像の表示についてのコードを非同期通信にすることが難しいのではないかと思っております。
ページナビにするのか無限スクロールにするのか悩んだ原因として、PHPで書いていた表示部分を Javascript で代用できるのかという疑問があります。
無限スクロールの場合 bbs_que_list.php の12行目から44行目までを非同期通信で書くことになると思うのですが、可能だと思われますでしょうか？

※参考サイト
※WordPress の Ajax 処理で fetch を使う方法１
https://celtislab.net/archives/20180727/ajax-fetch/

※方法2
http://web.mt-systems.jp/archives/1179

※SQL のデータを Ajax で表示
https://webcake.stars.ne.jp/jquery-ajax-php-json-sample.html

※最新コード（dell_okさんのコードはsample.phpに書いております）
https://wandbox.org/permlink/L3vLoCmJHP931Wnw

※考えたコード
<?php
/*
Template Name: que_list
固定ページ: 質問一覧画面
*/
get_header();
// POSTメソッドでリクエストした値を取得
$count = $_POST['count'];
// nullで初期化
$productList = null;
$sql = 'SELECT * FROM sortable';
$query = $wpdb->prepare($sql);
$rows = $wpdb->get_results($query);
$upload_dir = wp_upload_dir();

//UrlSearchParams を使った時の Content-Type は、application/x-www-form-urlencoded;charset=UTF-8になる
const params = new URLSearchParams();
//アクションフック
params.append('action', 'ajax_func');

// あらかじめ配列$productListを作成する
// 受け取ったデータを配列に代入する
// 最終的にhtmlへ渡される
$productList = array();

for ($i = 0; $i < 10; ++$i) {
++$count;
$productList['items'][] = ['title' => 'タイトル'.$count, 'ID' => '画像'.$count];
}
// 取得したデータを配列に格納
while ($rows as $row = $query->fetchObject())
{
$productList[] = array(
'ID'=> $row->id
,'title' => $row->title
);
}

// JSON形式で出力する
header('Content-Type: application/json');
echo json_encode( $productList );
exit;
?>

<script>
var count = 0;
$(function() {
add()
$(window).on("scroll", function() {
if ($(window).scrollTop() + $(window).height() >= $("html").height()) {
add()
}
})
});

function add() {
//FormDataオブジェクトのアクションフック
const formData = new FormData();
//formData.append("action", "アクション名");
formData.append("action", "bbs_que_list_items");
formData.append("count", count);
const opt = {
method: "post",
// 通信先ファイル名 (bbs_que_list.php内に書く場合いらない)
//url: "bbs_que_list.php",
// 受け取りデータの種類
//datatype: "json",
body: formData
}
fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt)
.then(response => {
return response.json();
})

.then(json => {
//.jsonファイルの読み取りに成功したら、使用するデータjson()を解析し、それらの値をリスト項目に追加してデータとして表示
//lengthで文字列や配列の長さを取得
//応答本体に items プロパティがある
for (let idx = 0; idx < json.items.length; idx++) {
count++;
const item = json.items[idx];
content =
"<div>" + item.id + "</div>" +
"<div>" + item.title + "</div>";
$("#content").append(content);
}
})

.catch(error => {
console.log(error);
});
};
</script>

回答No.7

dell_OK

参考サイトの提供ありがとうございます。
私の理解不足もあってのことですが、
２と４はあまり参考にできず、
１は期待通りに動かせませんでした。
３は期待通りに動かせたので、
私のローカルでサンプルに実装してみたのですが、
実装のしかたがよくないのか、
期待通りには動かせませんでした。
スクロール処理に関しては、
３が簡潔で一番使えそうな気がします。
ただ、これはこれで、非同期の処理を組み込んだり、
要素の追加がこれまでとは違った方法なので、
これまでの方法に書きかえたりと、
参考コードの取捨選択が必要なものです。

補足

アドバイスありがとうございます。
3のコードで考えてみて不可能だった場合、以前作成していたコードの不具合部分を質問をしながら修正してみることに致します。
要素の追加についてお聞きしたいのですが参考サイトの16行目の function add(firstIndex){} を非同期通信に書き換えるという事でしょうか？
スクロール部分のコードについて検索してみたところ stackoverflow.com で同様のコードがあった為スクロール部分は出来るだけ残した方が良いのではないかと考えております。

※方法３のコード
https://tetorachaos.com/html-infinite-scroll

※ユーザーが一番下までスクロールしたかどうかを確認するコード
https://stackoverflow.com/questions/3898130/check-if-a-user-has-scrolled-to-the-bottom-not-just-the-window-but-any-element

回答No.6

dell_OK

次の作業に入る前に確認しておきたいことがあり、
参考サイトのコードを試してみたのですが、
どうも不具合があるような気がします。
https://www.agent-grow.com/self20percent/2021/08/03/php%E3%81%A8ajax%E3%81%A7%E7%84%A1%E9%99%90%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F/

期待通りに動くように直すよりも、
他のところを参考にした方がよさそうです。

補足

回答ありがとうございます。
方法を複数探してみたところ4つ見つけることが出来たのですが、どの方法が良いと思われますでしょうか？
3番目の座標を取得する方法は現在のコードと似ているように思えます。

1,https://comment-out.net/2023/02/11/1550.html

2,https://yachin29.hatenablog.com/entry/2020/12/14/012856

3,https://tetorachaos.com/html-infinite-scroll

4,https://takaya-com.jp/archives/2017/10/%E6%AC%A1%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E8%87%AA%E5%8B%95%E3%81%A7%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80%E7%84%A1%E9%99%90%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB/