片側固定・片側スクロール分割ビュー

<div class="d01-13-08-wrap">
          <div class="d01-13-08-fixed">
            <h4>目次</h4>
            <div class="d01-13-08-progress"><span class="d01-13-08-bar"></span></div>
            <p class="d01-13-08-pct">0%</p>
          </div>
          <div class="d01-13-08-scroll">
            <p>セクション1のテキストです。右側だけが個別にスクロールする分割ビューポートです。</p>
            <p>セクション2のテキストです。スクロールすると左側の進捗バーが伸びていきます。</p>
            <p>セクション3のテキストです。ドキュメントサイトや長文コラムでよく使われる構成です。</p>
            <p>セクション4のテキストです。最後まで読むと進捗が100%になります。</p>
          </div>
        </div>

.prev.d01-13-08{padding:0}
        .d01-13-08-wrap{display:flex;width:100%;height:230px}
        .d01-13-08-fixed{width:38%;background:#111827;color:#fff;padding:18px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:10px}
        .d01-13-08-fixed h4{font-size:13px;font-weight:800;letter-spacing:.04em;margin:0}
        .d01-13-08-progress{width:100%;height:6px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden}
        .d01-13-08-bar{display:block;height:100%;width:0%;background:linear-gradient(90deg,#38bdf8,#6366f1);transition:width .12s linear}
        .d01-13-08-pct{font-size:12px;color:#94a3b8;margin:0}
        .d01-13-08-scroll{width:62%;height:230px;overflow-y:auto;padding:18px;box-sizing:border-box;background:#fff}
        .d01-13-08-scroll p{font-size:12.5px;line-height:1.8;color:#334155;margin:0 0 14px}

(function(){
        var root=document.getElementById('item-01-13-08');if(!root)return;
        var sc=root.querySelector('.d01-13-08-scroll');
        var bar=root.querySelector('.d01-13-08-bar');
        var pct=root.querySelector('.d01-13-08-pct');
        sc.addEventListener('scroll',function(){
          var max=sc.scrollHeight-sc.clientHeight;
          var p=max>0?Math.round((sc.scrollTop/max)*100):0;
          bar.style.width=p+'%';
          pct.textContent=p+'%';
        });
      })();