ドラッグで読了位置を移動できるシークバー目次

<div class="d06-09-12-wrap">
          <div class="d06-09-12-seek">
            <div class="d06-09-12-seektrack"><span class="d06-09-12-seekfill"></span><span class="d06-09-12-seekhandle"></span></div>
            <div class="d06-09-12-labels"><span>導入</span><span>展開</span><span>結論</span></div>
          </div>
          <div class="d06-09-12-body">
            <section><h4>導入</h4><p>下のバーをドラッグすると、そのままの割合で本文がスクロールします。</p></section>
            <section><h4>展開</h4><p>動画再生バーのような感覚で、読みたい位置へ直接移動できます。</p></section>
            <section><h4>結論</h4><p>長文記事の目次代わりとして、直感的な位置操作を提供します。</p></section>
          </div>
        </div>

.prev.d06-09-12{padding:0;display:block}
        .d06-09-12-wrap{height:260px;display:flex;flex-direction:column}
        .d06-09-12-seek{padding:16px 18px 10px}
        .d06-09-12-seektrack{position:relative;height:6px;background:#eceef5;border-radius:99px;cursor:pointer}
        .d06-09-12-seekfill{position:absolute;left:0;top:0;height:100%;width:0%;background:linear-gradient(90deg,#4f7cf7,#9b5cf6);border-radius:99px}
        .d06-09-12-seekhandle{position:absolute;top:50%;left:0%;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #5b3df0;box-sizing:border-box;transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(40,50,90,.25);cursor:grab}
        .d06-09-12-labels{display:flex;justify-content:space-between;margin-top:8px}
        .d06-09-12-labels span{font-size:10px;color:#8a90a5}
        .d06-09-12-body{flex:1;overflow-y:auto;padding:6px 18px 16px}
        .d06-09-12-body section{padding:6px 0 16px;border-bottom:1px dashed #eef0f5}
        .d06-09-12-body h4{margin:0 0 6px;font-size:13px;color:#242a3d}
        .d06-09-12-body p{margin:0;font-size:12px;color:#666c80;line-height:1.7}

(function(){
        var root=document.getElementById('item-06-09-12');if(!root)return;
        var body=root.querySelector('.d06-09-12-body');
        var track=root.querySelector('.d06-09-12-seektrack');
        var fill=root.querySelector('.d06-09-12-seekfill');
        var handle=root.querySelector('.d06-09-12-seekhandle');
        var dragging=false;
        function setPct(pct){
          pct=Math.max(0,Math.min(100,pct));
          fill.style.width=pct+'%';
          handle.style.left=pct+'%';
          var max=body.scrollHeight-body.clientHeight;
          body.scrollTop=max*(pct/100);
        }
        function pctFromEvent(e){
          var rect=track.getBoundingClientRect();
          var x=(e.touches?e.touches[0].clientX:e.clientX)-rect.left;
          return (x/rect.width)*100;
        }
        track.addEventListener('mousedown',function(e){dragging=true;setPct(pctFromEvent(e));});
        window.addEventListener('mousemove',function(e){if(dragging){setPct(pctFromEvent(e));}});
        window.addEventListener('mouseup',function(){dragging=false;});
        body.addEventListener('scroll',function(){
          if(dragging)return;
          var max=body.scrollHeight-body.clientHeight;
          var pct=max>0?(body.scrollTop/max)*100:0;
          fill.style.width=pct+'%';
          handle.style.left=pct+'%';
        });
      })();