要素のサイズ
//境界線、padding、スクロールバー(あれば)を含む
element.offsetWidth;
HTMLElement.offsetHeight

//paddingのみ:境界線、スクロールバー(あれば)は含まない
Element.clientWidth
Element.clientHeight


element.getBoundingClientRect();

要素の寸法と、そのビューポートに対する相対位置に関する情報を返す(ブラウザの表示領域の左上を(0, 0)として、そこからの相対位置)

サイズはpadding と border-widthを含む

getBoundingClientRect()で返ってくるプロパティは、小数になるケースがあるのでMath.roundで丸める

//left, top, right, bottom, x, y, width, height


絶対値

要素の寸法と、そのビューポートに対する相対位置に関する情報を返す(ブラウザの表示領域の左上を(0, 0)として、そこからの相対位置)

サイズはpadding と border-widthを含む

getBoundingClientRect()で返ってくるプロパティは、小数になるケースがあるのでMath.roundで丸める

//left, top, right, bottom, x, y, width, height
function getElementPosition(elem){
  var position=elem.getBoundingClientRect();
  return {
    left:Math.round(window.scrollX+position.left),
    top:Math.round(window.scrollY+position.top)


  }
}


TT
//CODE


スクロール
element.scrollIntoView();要素の位置までスクロール
//CODE
let element = document.getElementById('elem');
element.scrollIntoView();

//ウィンドウの上端までスクロール
element.scrollIntoView(true);

//ウィンドウの下端までスクロール
element.scrollIntoView(false);

element.scrollIntoView({
  behavior: "値",//smooth:スムーズなアニメーション
  block: "縦方向のスクロール位置",/start/center/end/nearest/現在の表示位置から計算して上端か下端の近い方にスクロール)
  inline: "横方向のスクロール位置" 上に同じ
});

_$fn.scroll = function(el,op) {
  if(!op) op = -(window.innerHeight/5);
  el.scrollIntoView(true);
  window.scrollBy({ top: op, behavior: 'smooth'});
}

window.scrollBy

//指定された量だけウィンドウ内の文書をスクロール


var rect = e.getBoundingClientRect();  // 画面左上を基準とする位置

// document(ページ左上)からの絶対座標
var x1 = rect.top + window.pageYOffset;
var y1 = rect.left + window.pageXOffset;