JavaScriptでスクロールに合わせて背景色のCSSを変更する方法

2019-08-312020-06-11JavaScript DOM操作,JavaScript

スクロール量に合わせてページの背景色のCSSを変更していく方法と、シンプルなJavaScriptの動作サンプルとサンプルコードです。

スクロール量に合わせて背景色を変更する

動作サンプル

See the Pen JavaScript Change background color on scrolling by yochans (@yochans) on CodePen.

サンプルコード

CSS

html, body, p{
  margin: 0;
  padding: 0;
}

body{
  height:10000px;
  background: #FF4081;
  transition: 1s;
}

JavaScript

//スクロール発火イベント
window.addEventListener( "scroll" ,function(){

  //スクロールの高さを取得
  let scroll = window.pageYOffset;
  
  if( scroll > 4000 ){ 
    document.body.style.backgroundColor = '#FFC400';
  }else if( scroll > 3000 ){
    document.body.style.backgroundColor = '#43A047';
  }else if( scroll > 2000 ){
    document.body.style.backgroundColor = '#FF6F00';
  }else if( scroll > 1000 ){
    document.body.style.backgroundColor = '#0091EA';
  }else{
    document.body.style.backgroundColor = '#FF4081';
  }
  
});

コード説明

window.addEventListener( “scroll" , 実行関数）にてスクロールを発火イベントとしています。

window.pageYOffsetにて現在のY軸スクロールポイントを取得。

if文の条件分岐で、高さに応じてbodyの背景色を変更しています。
高い数字、下部の方から記述しているのは、if文にorで範囲を指定するのが億劫だったからだけです。

CSSにてtransitionでアニメーション時間を指定することで、緩やかな背景色変更としています。

サンプルコードでは、bodyに指定している背景色を変更していますが、divなどのコンテナ要素に指定したい場合は「document.getElementById()」などで取得した要素を「document.body」の部分と差し替えて下さい。