要素が画面内にあるかどうかの判定

export function isHeightViewable(element){
  const {top, bottom} = element.getBoundingClientRect();
  return top >= 0 && bottom <= window.innerHeight;
}


要素が画面内にあるかどうかの判定 - Qiita

codeをいじりながらどういう処理をして画面内にいるかの判定をしているのかを探る

18:36:08 画面に表示されているかそうでないかをboolean値で返すようにした

それ以外のいらない処理は消した

表示領域のことをviewportと呼ぶらしい

を使っていたが、おそらく間違い

が負の値になったかどうかで判定できる

const target = document.getElementById('text-input');
window.addEventListener('load', () => console.log(handleEffect(target)));
window.addEventListener('scroll', () => console.log(handleEffect(target)));

// 垂直方向だけ見る場合
function handleEffect(element){
  const {top, bottom} = element.getBoundingClientRect();
  return top >= 0 && bottom <= window.innerHeight;
}
