数値カウントスクラブ

<div class="view08-16-11">
          <div class="num08-16-11">0<span class="unit08-16-11">%</span></div>
          <div class="bar08-16-11"><div class="barFill08-16-11"></div></div>
          <div class="scr08-16-11">
            <div class="sp08-16-11">
              <span class="hint08-16-11">↓ 枠内をスクロール<br>スクロール位置がそのまま数値になります</span>
            </div>
          </div>
        </div>

.d08-16-11{background:#f0fdf4;align-items:stretch;}
        .d08-16-11 .view08-16-11{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:linear-gradient(160deg,#f0fdf4,#dcfce7);
          display:flex;flex-direction:column;align-items:center;justify-content:center;
        }
        .d08-16-11 .num08-16-11{font-size:46px;font-weight:800;color:#166534;letter-spacing:-.02em;}
        .d08-16-11 .unit08-16-11{font-size:20px;font-weight:700;margin-left:2px;}
        .d08-16-11 .bar08-16-11{margin-top:14px;width:70%;height:8px;border-radius:4px;background:rgba(22,101,52,.15);overflow:hidden;}
        .d08-16-11 .barFill08-16-11{height:100%;width:0%;background:linear-gradient(90deg,#22c55e,#16a34a);will-change:width;}
        .d08-16-11 .scr08-16-11{position:absolute;inset:0;overflow-y:auto;}
        .d08-16-11 .sp08-16-11{height:900px;padding:16px 18px 0;}
        .d08-16-11 .hint08-16-11{display:inline-block;font-size:11.5px;line-height:1.7;color:#14532d;background:rgba(255,255,255,.8);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-16-11 .scr08-16-11');
        if(!scr)return;
        var num=document.querySelector('.d08-16-11 .num08-16-11');
        var unit=num.querySelector('.unit08-16-11');
        var fill=document.querySelector('.d08-16-11 .barFill08-16-11');
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          var val=Math.round(p*100);
          num.firstChild.textContent=val;
          fill.style.width=val+'%';
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();