方向で色が変わる読了プログレスバー

<div class="d08-13-09-stage">
          <div class="d08-13-09-bar"></div>
          <div class="d08-13-09-scroll">
            <div class="d08-13-09-body">
              <p>↓ 読み進むと青系 / ↑ 読み返すと暖色系にバーが変化</p>
              <div class="d08-13-09-block"></div>
              <div class="d08-13-09-block"></div>
              <div class="d08-13-09-block"></div>
              <div class="d08-13-09-block"></div>
            </div>
          </div>
        </div>

.prev.d08-13-09{padding:0;display:block}
        .d08-13-09-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#f8fafc}
        .d08-13-09-bar{
          position:absolute;left:0;top:0;height:5px;width:0%;z-index:3;
          background:linear-gradient(90deg,#38bdf8,#6366f1);
          transition:background .3s ease;
        }
        .d08-13-09-stage.is-up .d08-13-09-bar{background:linear-gradient(90deg,#fb7185,#f97316)}
        .d08-13-09-scroll{position:absolute;inset:0;overflow-y:auto;padding-top:5px}
        .d08-13-09-body{padding:16px}
        .d08-13-09-body p{font-size:11.5px;color:#475569;margin:0 0 12px;text-align:center}
        .d08-13-09-block{height:70px;border-radius:8px;margin-bottom:12px;background:linear-gradient(135deg,#e2e8f0,#cbd5e1)}

(function(){
        var stage=document.querySelector('.d08-13-09-stage');
        if(!stage)return;
        var scroller=stage.querySelector('.d08-13-09-scroll');
        var bar=stage.querySelector('.d08-13-09-bar');
        var last=0;
        scroller.addEventListener('scroll',function(){
          var top=scroller.scrollTop;
          if(top>last+2){stage.classList.remove('is-up');}
          else if(top<last-2){stage.classList.add('is-up');}
          last=top<=0?0:top;
          var max=scroller.scrollHeight-scroller.clientHeight;
          var ratio=max>0?top/max:0;
          bar.style.width=(Math.max(0,Math.min(1,ratio))*100)+'%';
        });
      })();