Javascriptでスクロールバーの位置を取得
「JavaScriptでスクロール位置を取得したい」「スクロールに応じて画面を演出したい」──そんなときに役立つ、 背景グラデーションとバー表示の実装方法を解説します。
scrollYやscrollHeightを使って現在位置を取得する
縦方向スクロールバーの位置を取得するには
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>