スクロール連動背景カラーモーフ

<div class="d08-01-12-scroll">
          <section class="d08-01-12-sec">
            <h5>MORPH SCROLL</h5><p>↓ 枠内をスクロールしてください</p>
          </section>
          <section class="d08-01-12-sec"><p>背景の色味がスクロール量に応じて<br>なめらかに移り変わります</p></section>
          <section class="d08-01-12-sec"><p>セクションの切り替えを<br>視覚的に演出できます</p></section>
        </div>

.prev.d08-01-12{padding:0;display:block}
        .d08-01-12-scroll{position:relative;width:100%;height:100%;min-height:260px;overflow-y:auto;background:linear-gradient(160deg,#1e1b4b,#312e81)}
        .d08-01-12-sec{height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff}
        .d08-01-12-sec h5{margin:0 0 8px;font-size:17px;letter-spacing:.25em}
        .d08-01-12-sec p{margin:0;font-size:12px;line-height:1.9;opacity:.85}

(function(){
        var scr=document.querySelector('.d08-01-12-scroll');
        if(!scr)return;
        var colors=[[30,27,75],[124,58,237],[6,95,70]];
        function lerp(a,b,t){return Math.round(a+(b-a)*t);}
        scr.addEventListener('scroll',function(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?Math.min(1,scr.scrollTop/max):0;
          var seg=p*(colors.length-1);
          var i=Math.min(colors.length-2,Math.floor(seg));
          var t=seg-i;
          var c1=colors[i],c2=colors[i+1];
          var r=lerp(c1[0],c2[0],t),g=lerp(c1[1],c2[1],t),b=lerp(c1[2],c2[2],t);
          scr.style.background='linear-gradient(160deg, rgb('+r+','+g+','+b+'), #0f172a)';
        },{passive:true});
      })();