Javascriptでスクロールバーの位置を取得して位置により背景を変える方法を解説

Javascriptでスクロールバーの位置を取得

縦方向スクロールバーの位置を取得するには
window.scrollY
で取得できます。

縦方向スクロールバーの最大値は
document.documentElement.scrollHeight-document.documentElement.clientHeight
で取得することが出来るので
縦方向のスクロールバーの位置の割合は
window.scrollY / (document.documentElement.scrollHeight-document.documentElement.clientHeight)
で計算することができます。

また、縦方向スクロールバーの幅は
window.innerWidth - document.body.clientWidth;
で取得することができます。

ソースコード

コンテンツがロードされたら、DIVタグを動的に生成して上部に配置しています。
本コンテンツを上下にスクロールすると背景のグラデーションが左右に移動し上部の赤色のバーの長さが変わります。

<script>
  let rate=0,scrollPositionElement=null;
  window.addEventListener("DOMContentLoaded",function(){
    scrollPositionElement=document.createElement("div");
    scrollPositionElement.style.position="fixed";
    scrollPositionElement.style.width="0";
    scrollPositionElement.style.height="8px";
    scrollPositionElement.style.left="5vw";
    //位置設定
    scrollPositionElement.style.top="8px";
    //scrollPositionElement.style.bottom="12px";
    //色設定
    scrollPositionElement.style.background="rgba(255,0,0, 0.4)";
    scrollPositionElement.setAttribute("id","scrollPositionElementId");
    document.body.appendChild(scrollPositionElement);
    document.body.style.background="linear-gradient(to right, white -100% , white -40%, #efd 0%, white 40%, white 200%)";
  });
  window.addEventListener("scroll",function(){
    //スクロールバーの幅を取得する
    let barWidth = window.innerWidth - document.body.clientWidth;
    //スクロールバーの割合を取得する
    let rate=window.scrollY/(document.documentElement.scrollHeight-document.documentElement.clientHeight);
    scrollPositionElement.style.width="calc( (90vw - "+barWidth+"px) * "+rate+")";
    let r1=rate*100-40;
    let r2=rate*100;
    let r3=rate*100+40;
    document.body.style.background="linear-gradient(to right, white -100% , white "+r1+"%, #efd "+r2+"%, white "+r3+"%, white 200%)";
  });
</script>