読了時間カウントダウンウィジェット

<div class="d06-09-06-wrap">
          <div class="d06-09-06-badge">⏱ 残り <b class="d06-09-06-min">4</b>分</div>
          <div class="d06-09-06-body">
            <section><h4>はじめに</h4><p>スクロールするほどバッジの残り時間が減っていきます。読み終える目安が一目で分かります。</p></section>
            <section><h4>効果</h4><p>残り時間の表示は「あと少しで読み終わる」という感覚を作り、離脱を防ぎます。</p></section>
            <section><h4>実装</h4><p>推定読了時間とスクロール割合から、残り分数を都度計算して表示を更新します。</p></section>
            <section><h4>まとめ</h4><p>読み切ると残り時間は0分になり、達成感を演出できます。</p></section>
          </div>
        </div>

.prev.d06-09-06{padding:0;display:block}
        .d06-09-06-wrap{position:relative;height:260px}
        .d06-09-06-badge{position:absolute;top:12px;right:12px;font-size:11px;font-weight:700;color:#c2410c;background:#fff7ed;
          padding:6px 12px;border-radius:20px;z-index:2;transition:color .25s,background .25s}
        .d06-09-06-badge.is-done{color:#059669;background:#ecfdf5}
        .d06-09-06-body{height:100%;overflow-y:auto;box-sizing:border-box;padding:52px 18px 16px}
        .d06-09-06-body section{padding:6px 0 14px;border-bottom:1px dashed #eef0f5}
        .d06-09-06-body h4{margin:0 0 6px;font-size:13px;color:#242a3d}
        .d06-09-06-body p{margin:0;font-size:12px;color:#666c80;line-height:1.7}

(function(){
        var root=document.getElementById('item-06-09-06');if(!root)return;
        var body=root.querySelector('.d06-09-06-body');
        var min=root.querySelector('.d06-09-06-min');
        var badge=root.querySelector('.d06-09-06-badge');
        var TOTAL=4;
        function upd(){
          var max=body.scrollHeight-body.clientHeight;
          var pct=max>0?Math.min(1,body.scrollTop/max):0;
          var rem=Math.max(0,Math.ceil(TOTAL*(1-pct)));
          min.textContent=rem;
          badge.classList.toggle('is-done',rem===0);
        }
        body.addEventListener('scroll',upd);upd();
      })();