2021.01.06

要素が画面内に入っているか判定するjavaScript

要素が画面内に入っているか判定する場合のjavascript

コピペで使用可能です。

var wh = window.innerHeight,
    elements = document.querySelectorAll('.view-target');
    
elements = Array.prototype.slice.call(elements, 0);

window.addEventListener('load', update_window_size);
window.addEventListener('resize', update_window_size);
function update_window_size() {
  wh = window.innerHeight;
}

check_view();
window.addEventListener('load', check_view);
window.addEventListener('resize', check_view);
window.addEventListener('scroll', check_view, { passive: true });

function check_view(){
  elements.forEach(function ($element, i) {
    var eh = $element.offsetHeight,
        nowpos = $element.getBoundingClientRect().top - eh;
    if(nowpos <= 0 && nowpos >= eh*-2){
      //見えてる時の処理をここに記述
    }else{
      //見えてない時の処理をここに記述
    }
  });
}

var wh = window.innerHeight,

elements = document.querySelectorAll('.view-target');

elements = Array.prototype.slice.call(elements, 0);

window.addEventListener('load', update_window_size);

window.addEventListener('resize', update_window_size);

function update_window_size() {

wh = window.innerHeight;

}

check_view();

window.addEventListener('load', check_view);

window.addEventListener('resize', check_view);

window.addEventListener('scroll', check_view, { passive: true });

function check_view(){

elements.forEach(function ($element, i) {

var eh = $element.offsetHeight,

nowpos = $element.getBoundingClientRect().top - eh;

if(nowpos <= 0 && nowpos >= eh*-2){

//見えてる時の処理をここに記述

}else{

//見えてない時の処理をここに記述

}

});

}

使い方は簡単で、判定したい要素に「view-target」クラスを付与するのみ。

あとは好きに処理を追加しましょう。

JavaScript