…

Mellow Lane

(function() { const doc = document.documentElement; const thumb = document.querySelector('.custom-scrollbar .scroll-thumb'); const track = document.querySelector('.custom-scrollbar .scroll-track'); function updateThumb() { const maxScroll = doc.scrollHeight - doc.clientHeight; const trackLen = track.clientHeight; // If nothing to scroll, thumb should fill the track if (maxScroll <= 0) { thumb.style.height = trackLen + 'px'; thumb.style.top = '0px'; return; } // Otherwise size & position proportionally const h = Math.max((doc.clientHeight / doc.scrollHeight) * trackLen, 20); const t = (doc.scrollTop / maxScroll) * (trackLen - h); thumb.style.height = h + 'px'; thumb.style.top = t + 'px'; } window.addEventListener('load', updateThumb); window.addEventListener('scroll', updateThumb, { passive: true }); window.addEventListener('resize', updateThumb); })();