add_pink_scrollbar_to_right_side_v2.js

(function(){
 if(document.getElementById('rs')) return;
 const s=document.createElement('div'), t=document.createElement('div');
 s.id='rs'; Object.assign(s.style,{position:'fixed',top:0,right:0,width:'12px',height:'100%',background:'rgba(255,192,203,.2)',zIndex:2147483647,cursor:'pointer'});
 Object.assign(t.style,{width:'100%',height:'60px',background:'deeppink',borderRadius:'6px',position:'absolute',top:0,transition:'box-shadow .18s,transform .18s'});
 s.appendChild(t); document.body.appendChild(s);
 let drag=false,startY=0,startScroll=0,focusTO;
 const update=()=>{ const sh=document.body.scrollHeight-window.innerHeight, bh=s.clientHeight-t.offsetHeight; t.style.top=(sh? (window.scrollY/sh)*bh : 0)+'px'; };
 t.onmousedown=e=>{ drag=true; startY=e.clientY; startScroll=window.scrollY; document.body.style.userSelect='none'; };
 document.onmouseup=()=>{ drag=false; document.body.style.userSelect=''; };
 document.onmousemove=e=>{ if(!drag) return; const sh=document.body.scrollHeight-window.innerHeight, bh=s.clientHeight-t.offsetHeight||1, dy=e.clientY-startY; window.scrollTo(0, Math.max(0, Math.min(sh, startScroll + (dy/bh)*sh))); update(); };
 window.addEventListener('scroll', update);
 window.addEventListener('wheel', e=>{
  e.preventDefault();                    // take control of wheel
  window.scrollBy(0, e.deltaY);          // scroll in same direction as wheel
  t.style.boxShadow='0 0 8px deeppink';  // visual focus
  t.style.transform='scaleX(1.06)';
  clearTimeout(focusTO);
  focusTO=setTimeout(()=>{ t.style.boxShadow=''; t.style.transform=''; }, 220);
  update();
 }, {passive:false});
 update();
})();