タイムライン進行スクラブ

<div class="view08-16-09">
          <div class="tlWrap08-16-09">
            <div class="tlLine08-16-09"></div>
            <div class="tlDot08-16-09" data-th="0.12" style="top:6%"></div>
            <div class="tlDot08-16-09" data-th="0.4" style="top:36%"></div>
            <div class="tlDot08-16-09" data-th="0.68" style="top:66%"></div>
            <div class="tlDot08-16-09" data-th="0.94" style="top:94%"></div>
          </div>
          <div class="scr08-16-09">
            <div class="sp08-16-09">
              <span class="hint08-16-09">↓ 枠内をスクロール<br>スクロール量に応じてタイムラインが伸びていきます</span>
            </div>
          </div>
        </div>

.d08-16-09{background:#f8fafc;align-items:stretch;}
        .d08-16-09 .view08-16-09{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:linear-gradient(160deg,#f1f5f9,#e2e8f0);
          display:flex;align-items:center;justify-content:center;
        }
        .d08-16-09 .tlWrap08-16-09{position:relative;width:6px;height:172px;background:rgba(30,41,59,.12);border-radius:3px;}
        .d08-16-09 .tlLine08-16-09{position:absolute;left:0;top:0;width:100%;height:0%;background:linear-gradient(180deg,#38bdf8,#a855f7);border-radius:3px;will-change:height;}
        .d08-16-09 .tlDot08-16-09{position:absolute;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;border:2px solid #94a3b8;transform:translateY(-50%) scale(.85);will-change:transform,background,border-color;}
        .d08-16-09 .scr08-16-09{position:absolute;inset:0;overflow-y:auto;}
        .d08-16-09 .sp08-16-09{height:900px;padding:16px 18px 0;}
        .d08-16-09 .hint08-16-09{display:inline-block;font-size:11.5px;line-height:1.7;color:#334155;background:rgba(255,255,255,.8);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-16-09 .scr08-16-09');
        if(!scr)return;
        var line=document.querySelector('.d08-16-09 .tlLine08-16-09');
        var dots=Array.prototype.slice.call(document.querySelectorAll('.d08-16-09 .tlDot08-16-09'));
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          line.style.height=(p*100)+'%';
          dots.forEach(function(dot){
            var th=parseFloat(dot.getAttribute('data-th'));
            if(p>=th){
              dot.style.background='linear-gradient(135deg,#38bdf8,#a855f7)';
              dot.style.borderColor='#fff';
              dot.style.transform='translateY(-50%) scale(1.15)';
            }else{
              dot.style.background='#fff';
              dot.style.borderColor='#94a3b8';
              dot.style.transform='translateY(-50%) scale(.85)';
            }
          });
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();