液体水位スクラブ

<div class="view08-16-04">
          <div class="glass08-16-04">
            <div class="liquid08-16-04"></div>
            <div class="pct08-16-04">0%</div>
          </div>
          <div class="scr08-16-04">
            <div class="sp08-16-04">
              <span class="hint08-16-04">↓ 枠内をスクロール<br>スクロール量がそのままグラスの水位(%)になります</span>
            </div>
          </div>
        </div>

.d08-16-04{background:#082f49;align-items:stretch;}
        .d08-16-04 .view08-16-04{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:linear-gradient(160deg,#0c4a6e,#082f49);
          display:flex;align-items:center;justify-content:center;
        }
        .d08-16-04 .glass08-16-04{position:relative;width:96px;height:160px;border:3px solid rgba(255,255,255,.5);border-radius:2px 2px 18px 18px;overflow:hidden;background:rgba(255,255,255,.06);}
        .d08-16-04 .liquid08-16-04{position:absolute;left:0;right:0;bottom:0;height:0%;background:linear-gradient(180deg,#38bdf8,#0369a1);will-change:height;}
        .d08-16-04 .liquid08-16-04::before{content:'';position:absolute;top:-5px;left:0;right:0;height:10px;background:radial-gradient(ellipse 10px 6px at center,rgba(255,255,255,.55) 0%,transparent 75%);background-size:20px 10px;}
        .d08-16-04 .pct08-16-04{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5);}
        .d08-16-04 .scr08-16-04{position:absolute;inset:0;overflow-y:auto;}
        .d08-16-04 .sp08-16-04{height:900px;padding:16px 18px 0;}
        .d08-16-04 .hint08-16-04{display:inline-block;font-size:11.5px;line-height:1.7;color:#e0f2fe;background:rgba(8,47,73,.6);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-16-04 .scr08-16-04');
        if(!scr)return;
        var liquid=document.querySelector('.d08-16-04 .liquid08-16-04');
        var pct=document.querySelector('.d08-16-04 .pct08-16-04');
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          liquid.style.height=(p*100)+'%';
          pct.textContent=Math.round(p*100)+'%';
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();