JavaScript | スクロールで要素が画面内に入ったら実行するイベントの実装方法
JavaScriptだけでスクロールで要素が画面内に入ったら実行するイベントを実装する方法を紹介しています。
jQueryの「on」イベントでいうところの「inview」と同じような動作になると思います。
スクロールで要素が画面内に入ったら実行するイベント
スクロールで要素が画面内に入ったら実行するイベントの動作サンプルとJavaScriptのサンプルコードになります。
動作サンプルではターゲット要素が画面内に入った時に一度だけ実行するようにしていますので、再度動作チェックする場合は「Rerun」を押して下さい。
See the Pen JavaScript | Add css style to head by yochans (@yochans) on CodePen.
サンプルのHTMLにはスクロールを確認する為に高さを持つ要素を並べています。
また、4つ目の要素を画面内に入ったらイベントを実行するターゲット要素に設定しています。
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block" id="target">4</div>
<div class="block">5</div>スクロールイベントを記述。
ターゲット要素の画面トップからの距離（位置）を取得します。
要素の画面トップからの距離（位置）より画面の高さが小さい場合に処理を実行するように記述します。
変数「once」は一回だけ実行する時用になります。
スクロールイベントですので毎回実行してしまわないようにする為です。
また、スクロールイベント自体にイベントを一回だけ実行する{once: true}を付けるのは最初のスクロール検出した時点でイベントが破棄されてしまいますので注意して下さい。
// onceは一回だけ実行する時用です
let once = false;
window.addEventListener('scroll', function () {
// ターゲットの画面トップからの距離
taeget_position = document.querySelector('#target').getBoundingClientRect().top;
// 画面トップからの距離から画面の高さより小さければ実行する
if (taeget_position <= window.innerHeight && once !== true) {
once = true;
alert(`Execute the event`);
}
});スクロールイベントのイベント情報は必要ありませんので、スクロールイベント以外、例えば「要素がアニメーションなどで移動していて画面内に入ったら実行するイベント」などにも簡単に応用が可能です。