javascript dom元素の位置関係方法

518 ワード

dom要素の位置を取得します.

function offset(el) {
  const rect = el.getBoundingClientRect();
  return {
    top: rect.top + document.body.scrollTop,
    left: rect.left + document.body.scrollLeft,
  };
}

viewportの高さ、幅を取得します.
ブラウザウィンドウのビューの高さ(ピクセル単位)が水平スクロールバーにある場合、

Window.innerHeight
window.innerWidth

dom元素がviewport内にあるかどうかを判断する.

ele.getBoundingClientRect().top > window.innerHeight //         

ele.getBoundingClientRect().bottom < 0 //

JavaScriptはLabelラベルの割り当て操作を実現します.