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

/icons/javascript.icon

code:script.js

export function isHeightViewable(element){

const {top, bottom} = element.getBoundingClientRect();

return top >= 0 && bottom <= window.innerHeight;

}

/icons/hr.icon

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

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

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

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

使っているもの

code:js

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;

}