← 動的パーツギャラリーへ戻る

パーツ番号 11-10-08 ・ JavaScript使用

全件読み込み完了メッセージ

無限スクロールでリストの最後まで読み込むと「すべて読み込みました」が表示され、それ以上の読み込みが停止する演出。WordPressの記事一覧の終端をユーザーに明確に伝えられます。

scrollautojs

プレビュー

ソースコード

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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。