パーツ番号 11-10-08 ・ JavaScript使用
全件読み込み完了メッセージ
無限スクロールでリストの最後まで読み込むと「すべて読み込みました」が表示され、それ以上の読み込みが停止する演出。WordPressの記事一覧の終端をユーザーに明確に伝えられます。
プレビュー
ソースコード
HTML
<div class="d11-10-08-wrap">
<div class="d11-10-08-scroll" id="d1468Scroll">
<ul class="d11-10-08-list" id="d1468List">
<li>レビュー: 使い心地に満足しています</li>
<li>レビュー: 配送が早くて助かりました</li>
<li>レビュー: 期待通りの品質でした</li>
</ul>
<div class="d11-10-08-sentinel" id="d1468Sentinel"></div>
<p class="d11-10-08-end" id="d1468End">すべて読み込みました</p>
</div>
<p class="d11-10-08-hint">▼ 下までスクロールすると自動読み込み</p>
</div>CSS
.prev.d11-10-08{align-items:flex-start;justify-content:flex-start}
.d11-10-08-wrap{width:100%}
.d11-10-08-scroll{height:200px;overflow-y:auto;border-radius:12px;background:#f8f9fb;border:1px solid #eef0f3;padding:8px}
.d11-10-08-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.d11-10-08-list li{background:#fff;border:1px solid #eef0f3;border-radius:8px;padding:9px 11px;font-size:11.5px;color:#374151}
.d11-10-08-sentinel{height:1px}
.d11-10-08-end{display:none;text-align:center;font-size:11px;color:#9ca3af;margin:10px 0 2px}
.d11-10-08-end.show{display:block}
.d11-10-08-hint{margin:8px 0 0;font-size:10.5px;color:#9ca3af;text-align:center}JavaScript
(function(){
var root=document.getElementById('item-11-10-08');
var scroll=root.querySelector('#d1468Scroll');
var list=root.querySelector('#d1468List');
var sentinel=root.querySelector('#d1468Sentinel');
var endMsg=root.querySelector('#d1468End');
var batches=0,maxBatches=2,busy=false;
var topics=['梱包が丁寧で好印象でした','サイズ感がちょうど良かったです','また利用したいと思います'];
if(!('IntersectionObserver' in window))return;
var io=new IntersectionObserver(function(entries){
entries.forEach(function(entry){
if(entry.isIntersecting&&!busy&&batches<maxBatches){
busy=true;
setTimeout(function(){
batches++;
for(var i=0;i<3;i++){
var li=document.createElement('li');
li.textContent='レビュー: '+topics[i%topics.length];
list.appendChild(li);
}
busy=false;
if(batches>=maxBatches){
endMsg.classList.add('show');
io.unobserve(sentinel);
}
},700);
}
});
},{root:scroll,threshold:0.01});
io.observe(sentinel);
})();クラス名 .d11-10-08 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。