プルダウン更新

<div class="d11-03-03-phone">
          <div class="d11-03-03-screen" id="d11-03-03-screen">
            <div class="d11-03-03-spinner"><span class="d11-03-03-ring"></span><span class="d11-03-03-txt" id="d11-03-03-txt">引っ張る</span></div>
            <div class="d11-03-03-list" id="d11-03-03-list">
              <div class="d11-03-03-row">最新の記事 1</div>
              <div class="d11-03-03-row">最新の記事 2</div>
              <div class="d11-03-03-row">最新の記事 3</div>
              <div class="d11-03-03-row">最新の記事 4</div>
            </div>
          </div>
        </div>

.d11-03-03-phone{width:190px;height:240px;border-radius:24px;border:6px solid #1f2937;background:#fff;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.15)}
        .d11-03-03-screen{position:absolute;inset:0;background:#f8fafc;overflow:hidden;touch-action:none}
        .d11-03-03-spinner{position:absolute;top:-46px;left:0;right:0;height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#4f46e5}
        .d11-03-03-ring{width:20px;height:20px;border:3px solid #c7d2fe;border-top-color:#4f46e5;border-radius:50%}
        .d11-03-03-ring.d11-03-03-spin{animation:d11-03-03-rot .7s linear infinite}
        @keyframes d11-03-03-rot{to{transform:rotate(360deg)}}
        .d11-03-03-txt{font-size:10px;font-weight:600}
        .d11-03-03-list{position:absolute;inset:0;padding:8px}
        .d11-03-03-row{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:12px;margin-bottom:8px;font-size:12px;color:#334155}

(function(){
        var root=document.getElementById('item-11-03-03');if(!root)return;
        var sc=root.querySelector('#d11-03-03-screen'),list=root.querySelector('#d11-03-03-list'),
            spin=root.querySelector('.d11-03-03-spinner'),ring=root.querySelector('.d11-03-03-ring'),txt=root.querySelector('#d11-03-03-txt');
        var sy=0,dy=0,drag=false,busy=false;
        sc.addEventListener('pointerdown',function(e){if(busy)return;drag=true;sy=e.clientY;sc.setPointerCapture(e.pointerId);});
        sc.addEventListener('pointermove',function(e){if(!drag)return;dy=Math.max(0,Math.min(60,e.clientY-sy));list.style.transform='translateY('+dy+'px)';spin.style.transform='translateY('+dy+'px)';if(dy>45)txt.textContent='離して更新';else txt.textContent='引っ張る';});
        sc.addEventListener('pointerup',function(){if(!drag)return;drag=false;
          if(dy>45){busy=true;ring.classList.add('d11-03-03-spin');txt.textContent='更新中…';list.style.transform='translateY(46px)';spin.style.transform='translateY(46px)';
            setTimeout(function(){ring.classList.remove('d11-03-03-spin');list.style.transition='transform .3s';spin.style.transition='transform .3s';list.style.transform='';spin.style.transform='';setTimeout(function(){list.style.transition='';spin.style.transition='';busy=false;txt.textContent='引っ張る';},300);},1200);
          }else{list.style.transition='transform .25s';spin.style.transition='transform .25s';list.style.transform='';spin.style.transform='';setTimeout(function(){list.style.transition='';spin.style.transition='';},250);}
          dy=0;
        });
      })();