スクロール量に応じて要素のスタイルをJavaScriptで変更する方法のメモ。
【JavaScript】スクロール量に応じて要素のスタイルを変化
例えば『スクロールしてキービジュアルを通り過ぎたらヘッダーの背景色を変えたい』ってケースってありますよね。
方法は色々あって、その一つに過去記事で紹介した Intersection Observer API を使う方法もあるのですが、IEの問題とか何らかの理由で使えないって場合、やはりスクロール量で処理しなきゃいけないかなぁと思います。
で、スクロール量を検知して実行すると、レスポンシブで『可変するキービジュアルをスクロールで通り過ぎたら』というタイミングをピンポイントに狙って指定するのは難しいですよね。
なので、ドキュメント全体のスクロール量ではなく、キービジュアル（オブジェクト）の高さを取得し、スクロール量がその量（高さ）を越えたら発火するイベントを作りました。
オブジェクトの高さを取得し、スクロール量がそれを超えたらイベントを発火させる
ということでサンプルです↓
See the Pen Object Height Scroll by nkmr (@nkmr_whoo) on CodePen.
↑をスクロールすると、キービジュアルに模した黄色いブロックを超えたあたりで固定されたヘッダーの背景色が変わります。
カンタンに説明すると、キービジュアルの高さを .clientHeight プロパティで取得し、スクロール量と比較して if文でヘッダーの背景色スタイルを変更しています。
developer.mozilla.orgまとめ
こんな感じでスクロール量に応じて要素のスタイルを変化させる方法のご紹介を終わります。
スクロールするたびに発火させるよりは Intersection Observer API を使った方がいいと思うのですが、使えない場合には今回の方法も検討していただければと思います。
Intersection Observer API を使う方法もよかったら参照してみてください↓
