ページのスクロールされている割合を表示させる

  • Updated: 2023.01.05
  • Published: 2023.01.04
  • 941views
  • JavaScript

概要

このサイトのヘッダーでも実装している、スクロールされている割合をページに表示させるJavaScriptを実装します。

一番上の黒いバー

ソース

  <div class="scroll-pos">
    <div class="bar"></div>
  </div>
if( !window.scrollTop ) {
  window.scrollTop = ()=>{
    return document.documentElement.scrollTop || document.body.scrollTop;
  }
}

function setScrollPos(){
  let $bar = document.querySelector('.scroll-pos .bar');
  let onscroll = ()=>{
    let $body = document.getElementsByTagName('body')[0];
    let per = Math.round(window.scrollTop()/($body.offsetHeight - document.documentElement.clientHeight) * 100);
    $bar.style.width = `${ per }%`;
  };
  window.addEventListener('scroll',onscroll,false);
}

setScrollPos();
.scroll-pos {
    height: 5px;
    background-color: #999;
}
.scroll-pos .bar {
    -webkit-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
    width: 0;
    height: 5px;
    background-color: #000;
}

解説

if( !window.scrollTop ) {
  window.scrollTop = ()=>{
    return document.documentElement.scrollTop || document.body.scrollTop;
  }
}

スクロール位置をwindow.scrollTop()で取得できるようにしています。


let $bar = document.querySelector('.scroll-pos .bar');

要素 class=”bar” をスクロール割合によって変化させます。


window.addEventListener('scroll',onscroll,false);

スクロールイベントが発生するごとに関数「onscroll」を呼び出します。


  let onscroll = ()=>{
    let $body = document.getElementsByTagName('body')[0];
    let per = Math.round(window.scrollTop()/($body.offsetHeight - document.documentElement.clientHeight) * 100);
    $bar.style.width = `${ per }%`;
  };

スクロール割合を求める数式は下記になります。

( スクロール位置 / (bodyの高さ – ブラウザの高さ) ) x 100

(bodyの高さ – ブラウザの高さ) しているのは一番下までスクロールした時、ブラウザ表示されている部分があるので、ページ全体の高さからブラウザで表示されている部分の高さを引いた値がスクロール可能領域になります。

最後に100掛けているのは( スクロール位置 / (bodyの高さ – ブラウザの高さ) )だと0〜1までなので100掛けてスタイルシートのwidthの%で使用できるようにしています。

関連記事

人気の投稿

最新の投稿

タグ

月別アーカイブ

Contact

WEB制作の依頼など気軽にお問い合わせください。

お問い合わせ