要素のサイズ
//境界線、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)
}
}
スクロール
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;