JavaScriptを使用してブラウザのスクロール位置を取得・設定して様々な処理を実行する方法

※本記事のプログラムは2018年2月14日に修正しました。

プログラムを組む感覚を取り戻そうとしています、網干です。

少しの期間ですがプログラムから離れていたら、もうGoogleさんに頼らないと組めない頭になっていました。
これじゃイカンということで、勘を取り戻すためにもちょっとしたプログラムを組んでご紹介します。

今回はJavaScriptを使用してスクロールの位置を取得し続けて、ちょっとした処理を行う方法をご紹介します。

うまく活用すればサイトのユーザービリティの向上にも役立つかもしれません！

今回のブログの見出しはコチラです！

1 スクロールの位置を取得または設定する方法
2 スクロール位置を監視して何かしらの処理をさせるサンプルコード
3 適切なスクロール位置で適切なコンテンツを出すことでユーザビリティの向上も

スクロールの位置を取得または設定する方法

スクロール位置はonscrollイベントで取得します。

onscrollイベントに関しての詳しい説明は下記のサイト様でうまくまとめられていますのでご参照ください。
onscrollイベント
 スクロールの位置（量）を取得・設定

要するにwindow.onscrollのイベントに処理を追加しましょう、という事ですね。

onscrollイベントが発生した際にdocument.documentElement.scrollTopを確認することで、オブジェクトのスクロール位置が取得できます。
また、document.documentElement.scrollTopは値の参照だけでなく代入もできるので、スクロールの位置を設定したい場合は値を入力することで設定もできるようです。

では実際に、onscrollイベントに処理を追加してスクロール位置を監視しながら何らかの処理をさせてみましょう。

スクロール位置を監視して何かしらの処理をさせるサンプルコード

今回作成したコードは…
1. スクロール量を常に取得して表示
2. スクロール量が特定の位置に達したら何かしらの処理を行う
上記を意識してコードを組んでみました。

具体的には下記のようなコードになります。
（※本記事にもコードを仕込んでおります。画面の右下にスクロール量を表示して、特定のスクロール量に達すると大魔神が降臨します。クリックして撃破しましょう！）

スクロール量が
0pxを突破！

<div id="img-campus" style="position: fixed; bottom: 0px; right: 0px; width: 200px; height: 165px; background: url(https://incloop.com/wp-content/uploads/2017/04/02_雲みたいな吹き出し.png); background-size: 200px; background-repeat: no-repeat; z-index: 100;">
  <div id="fukidashi-box" style="text-align: center; position: relative; top: 60px;">
    <p style="line-height: 165%;">スクロール量が<br><span id="scroll-count">0</span>pxを突破！<span id="subtext"></span></p>
  </div>
</div>

<div id="tanaka-daimajin" style="position: fixed; top: -600px; width: auto; cursor: pointer; z-index: 100;" onClick="DaimajinDown();">
  <img src="https://incloop.com/wp-content/uploads/2017/03/田中さん.png">
</div>

<script type="text/javascript">
<!--
  /***** init set S *****/
  // 定数定義
  const posImgChangePx   = 2000;  // 吹き出しの画像を変えるpx位置
  const posDaimajinDefPx = -600;  // 大魔神の基本のTopのpx位置
  const posDaimajinMaxPx = 100;   // 大魔神が降臨できる限界のTopのpx位置
  var   documentElement  = null;  // スクロールを測定する要素
  var   flgImgChange     = false; // 画像切替確認用フラグ

  // 要素取得
  var getElmImgCampus   = document.getElementById('img-campus');
  var getElmFukidashi   = document.getElementById('fukidashi-box');
  var getElmScrollCount = document.getElementById('scroll-count');
  var getElmSubText     = document.getElementById('subtext');
  var getElmDaimajin    = document.getElementById('tanaka-daimajin');
  
  // スクロール位置を測定する要素を設定
  if (navigator.userAgent.toLowerCase().match(/webkit|msie 5/)) {
    // Webkit系（Safari, Chrome, iOS）判定
    if(navigator.userAgent.indexOf('Chrome') != -1){
      // Chromeはhtml要素
      documentElement = document.documentElement;
    } else {
      // Chrome以外はbody要素
      documentElement = document.body;
    }
  } else {
    // IE（6以上）、Firefox、Operaはhtml要素
    documentElement = document.documentElement;
  }
  /***** init set E *****/
  
  /***** event func set S *****/
  // ウィンドウのスクロール量取得
  window.onscroll = function() {
    // スクロール位置を入力
    getElmScrollCount.innerHTML = Math.floor( documentElement.scrollTop );
    
    // 画像切替判定
    if( documentElement.scrollTop > posImgChangePx ){
      // 画像切替
      getElmImgCampus.style.backgroundImage = 'url(https://incloop.com/wp-content/uploads/2017/03/爆発吹き出し.png)';
      // フラグ切替
      flgImgChange = true;
      // 文言追加
      getElmSubText.innerHTML = '<br><font color="red">やばい！ヤツが来る！！<br>クリックして撃破しよう！</font>';
      // 文言の位置調整
      getElmFukidashi.style.top = '20px';
      // 大魔神の位置を調整
      var tempPos = posDaimajinDefPx + ( Math.floor( documentElement.scrollTop ) - posImgChangePx );
      // 大魔神の降臨位置が最大の値以上？
      if( tempPos >= posDaimajinMaxPx ) {
        // 大魔神の位置を変更
        getElmDaimajin.style.top = posDaimajinMaxPx + 'px';
      } else {
        getElmDaimajin.style.top = tempPos  + 'px';
      }
    } else if( ( documentElement.scrollTop <= posImgChangePx ) && ( flgImgChange == true ) ) {
      // 画像切替
      getElmImgCampus.style.backgroundImage = 'url(https://incloop.com/wp-content/uploads/2017/04/02_雲みたいな吹き出し.png)';
      // フラグ切替
      flgImgChange = false;
      // 文言削除
      getElmSubText.innerHTML = '';
      // 文言の位置調整
      getElmFukidashi.style.top = '60px';
    }
  };
  /***** event func set E *****/
  
  /***** func set S *****/
  function DaimajinDown(){
    getElmDaimajin.style.display= 'none';
  }
  /***** func set E *****/
// -->
</script>

<p style="line-height: 165%;">スクロール量が<br><span id="scroll-count">0</span>pxを突破！<span id="subtext"></span></p>

</div>

</div>

<!--

/***** init set S *****/

// 定数定義

const posImgChangePx = 2000; // 吹き出しの画像を変えるpx位置

const posDaimajinDefPx = -600; // 大魔神の基本のTopのpx位置

const posDaimajinMaxPx = 100; // 大魔神が降臨できる限界のTopのpx位置

var documentElement = null; // スクロールを測定する要素

var flgImgChange = false; // 画像切替確認用フラグ

// 要素取得

var getElmImgCampus = document.getElementById('img-campus');

var getElmFukidashi = document.getElementById('fukidashi-box');

var getElmScrollCount = document.getElementById('scroll-count');

var getElmSubText = document.getElementById('subtext');

var getElmDaimajin = document.getElementById('tanaka-daimajin');

// スクロール位置を測定する要素を設定

if (navigator.userAgent.toLowerCase().match(/webkit|msie 5/)) {

// Webkit系（Safari, Chrome, iOS）判定

if(navigator.userAgent.indexOf('Chrome') != -1){

// Chromeはhtml要素

documentElement = document.documentElement;

} else {

// Chrome以外はbody要素

documentElement = document.body;

}

} else {

// IE（6以上）、Firefox、Operaはhtml要素

documentElement = document.documentElement;

}

/***** init set E *****/

/***** event func set S *****/

// ウィンドウのスクロール量取得

window.onscroll = function() {

// スクロール位置を入力

getElmScrollCount.innerHTML = Math.floor( documentElement.scrollTop );

// 画像切替判定

if( documentElement.scrollTop > posImgChangePx ){

// 画像切替

getElmImgCampus.style.backgroundImage = 'url(https://incloop.com/wp-content/uploads/2017/03/爆発吹き出し.png)';

// フラグ切替

flgImgChange = true;

// 文言追加

getElmSubText.innerHTML = '<br><font color="red">やばい！ヤツが来る！！<br>クリックして撃破しよう！</font>';

// 文言の位置調整

getElmFukidashi.style.top = '20px';

// 大魔神の位置を調整

var tempPos = posDaimajinDefPx + ( Math.floor( documentElement.scrollTop ) - posImgChangePx );

// 大魔神の降臨位置が最大の値以上？

if( tempPos >= posDaimajinMaxPx ) {

// 大魔神の位置を変更

getElmDaimajin.style.top = posDaimajinMaxPx + 'px';

} else {

getElmDaimajin.style.top = tempPos + 'px';

}

} else if( ( documentElement.scrollTop <= posImgChangePx ) && ( flgImgChange == true ) ) {

// 画像切替

getElmImgCampus.style.backgroundImage = 'url(https://incloop.com/wp-content/uploads/2017/04/02_雲みたいな吹き出し.png)';

// フラグ切替

flgImgChange = false;

// 文言削除

getElmSubText.innerHTML = '';

// 文言の位置調整

getElmFukidashi.style.top = '60px';

}

};

/***** event func set E *****/

/***** func set S *****/

function DaimajinDown(){

getElmDaimajin.style.display= 'none';

}

/***** func set E *****/

// -->

</script>

各処理の解説は全てコードのコメントに記載しています。

画面上で見るとなかなか手の込んだ仕組みをしていそうですが、コードを見ると意外と短くてすっきりしていますね。
onscrollイベント内の処理はもう少し最適化できそうですが…。

特に、画像の切り替えや文言の変更は毎回入力する必要はないので、切り替えのタイミングのみで処理をさせたいですね。
ただ、if分岐が増えてしまいそうなのが気になるので、今回はこのまま処理をさせることにしました。

適切なスクロール位置で適切なコンテンツを出すことでユーザビリティの向上も

いかがでしたか？

最近、様々なサイトで特定のスクロール位置で何かを表示するようなギミックをよく見かけます。
動きがあって面白いサイトなのですが、見えないコンテンツはGoogleの評価的にはどうなのだろうと気になってしまいます。
参考：展開ボタンやタブに隠れたコンテンツは無視され検索結果の対象にならないかもしれない

ですが、うまく作りこんであるサイトは、スクロールに合わせて目次が追従したり、他の記事への紹介を自然に挟みこんできたりと、「便利だなぁ」と感心することもありました。
ユーザーが便利だと思えるようなコンテンツは必ず評価の対象になると思うので、そういったコンテンツをもっと作っていきたいですね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。