無限スクロール(自動読み込み)

<div class="d11-10-02-wrap">
          <div class="d11-10-02-scroll" id="d1462Scroll">
            <ul class="d11-10-02-list" id="d1462List">
              <li>記事001: 春の新生活準備リスト</li>
              <li>記事002: 在宅ワークの効率化術</li>
              <li>記事003: 週末におすすめの過ごし方</li>
              <li>記事004: 収納上手になるコツ</li>
            </ul>
            <div class="d11-10-02-sentinel" id="d1462Sentinel"></div>
            <p class="d11-10-02-loading" id="d1462Loading">読み込み中<span></span><span></span><span></span></p>
          </div>
          <p class="d11-10-02-hint">▼ 下までスクロールで自動読み込み</p>
        </div>

.prev.d11-10-02{align-items:flex-start;justify-content:flex-start}
        .d11-10-02-wrap{width:100%}
        .d11-10-02-scroll{height:200px;overflow-y:auto;border-radius:12px;background:#f8f9fb;border:1px solid #eef0f3;padding:8px}
        .d11-10-02-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
        .d11-10-02-list li{background:#fff;border:1px solid #eef0f3;border-radius:8px;padding:9px 11px;font-size:11.5px;color:#374151}
        .d11-10-02-sentinel{height:1px}
        .d11-10-02-loading{display:none;justify-content:center;align-items:center;gap:4px;font-size:11px;color:#9ca3af;text-align:center;margin:8px 0 0;padding:0}
        .d11-10-02-loading.show{display:flex}
        .d11-10-02-loading span{width:5px;height:5px;border-radius:50%;background:#a5b4fc;animation:d1462Dot 1s infinite ease-in-out}
        .d11-10-02-loading span:nth-child(2){animation-delay:.15s}
        .d11-10-02-loading span:nth-child(3){animation-delay:.3s}
        @keyframes d1462Dot{0%,80%,100%{opacity:.25;transform:scale(.7)}40%{opacity:1;transform:scale(1)}}
        .d11-10-02-hint{margin:8px 0 0;font-size:10.5px;color:#9ca3af;text-align:center}

(function(){
        var root=document.getElementById('item-11-10-02');
        var scroll=root.querySelector('#d1462Scroll');
        var list=root.querySelector('#d1462List');
        var sentinel=root.querySelector('#d1462Sentinel');
        var loading=root.querySelector('#d1462Loading');
        var n=4,max=16,busy=false;
        var topics=['旬の食材で作る簡単レシピ','おすすめの読書時間の作り方','部屋を広く見せる配置術','朝の支度を時短する工夫','健康的な間食の選び方','出張に便利な持ち物リスト'];
        if(!('IntersectionObserver' in window))return;
        var io=new IntersectionObserver(function(entries){
          entries.forEach(function(entry){
            if(entry.isIntersecting&&!busy&&n<max){
              busy=true;
              loading.classList.add('show');
              setTimeout(function(){
                for(var i=0;i<3&&n<max;i++){
                  n++;
                  var li=document.createElement('li');
                  li.textContent='記事'+(n<10?'00'+n:'0'+n)+': '+topics[n%topics.length];
                  list.appendChild(li);
                }
                loading.classList.remove('show');
                busy=false;
                if(n>=max)io.unobserve(sentinel);
              },700);
            }
          });
        },{root:scroll,threshold:0.01});
        io.observe(sentinel);
      })();