JavaScript で要素のスクロール値を取得して背景色に反映させてみよう

phi phi on javascript

JavaScript で要素の scroll 値を取得して遊んでみた tips です.

Runstant Demo

今回作ったデモです. スクロールすると背景色が変わるのが分かるかと思います.

Code

html

.wrap 要素を作って, その中にスクロールさせるための詰め物 .pad 要素を作っています.

<body>  
  <h1>スクロールしてね♪</h1>
  <div class='wrap'>
    <div class='pad'></div>
  </div>
</body>  

css

.wrap を画面中央, いっぱいに表示して, .padheight の値を大きくすることでスクロールできるようにしています.

.wrap {
  position: absolute;
  height: auto;
  top: 0;
  bottom: 0;
  width: auto;
  left: 0;
  right: 0;
  overflow: auto;
}

.pad {
  height: 2000px;
}

javascript

スクロールイベントを登録後, スクロール値に応じて背景色を変更しています.

window.onload = function() {  
  // スクロールイベントを登録
  document.querySelector('.wrap').onscroll = function() {
    // スクロール最大値を計算
    var maxScrollValue = this.scrollHeight - this.offsetHeight;
    // 0.0 ~ 1.0 に変換
    var rate = (this.scrollTop/maxScrollValue);
    // hsl 値を作成
    var color = 'hsl(' + (rate*360) + ', 90%, 70%)';

    // 背景色を変更
    document.body.style.backgroundColor = color;
  };
};

Tips

scroll イベントを登録

要素.onscroll = function() { ... }

という形でスクロール時のイベントを登録できます.

スクロールの値を求めよう

var v = 要素.scrollTop;  

で現在のスクロール値を取得できます.

スクロールできる最大値を求めよう

offsetHeight で要素の高さを取得し, scrollHeight で要素全体の高さを取得できます.

なので下記の処理でスクロールできる最大値, つまり scrollTop の最大値を取得できます.

var value = this.scrollHeight - this.offsetHeight;