viewportとelementのサイズと位置の整理方法

viewportとelementのサイズと位置の整理方法
⭐️より多くの先端技術と知識ポイントは、購読番号を検索します.JS 購読
ビューページまたはウィンドウの位置と幅の高さ
ビューの幅を取得
以下の方法はスクロールバーを含む幅の高さであり、IE 8をサポートしていません.

window.innerWidth
window.innerHeight

width + padding + border + は、ツールバーを含む幅の高さを取得することができます.
ページのスクロール位置
ページ全体のスクロールの位置を返します.PageYOffset/pageXOffsetはscrolly/scrollXの値と一致しています.前者は後者の別名です.前者はIE 8に対応していないことを推奨します.

window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft

ウィンドウはディスプレイの位置にあります.
標準ブラウザはscreenX/screenYを使用しています.IEではscreenLeft/screenTopを使用しています.

window.screenLeft || window.screenX
window.screenTop || window.screenY

元素の幾何学サイズと位置
要素の占有空間サイズと位置
get BoundingCient Rect
使用方法getBoundingClientRect()の戻り値は以下の図を参照してください.
IEはtop right bottom leftの4つの値だけを返します.もしwidth heightが必要なら、計算が必要です.

function getBoundingClientRect(elem) {
    let rect = elem.getBoundingClientRect()
    return {
        top: rect.top,
        right: rect.right,
        bottom: rect.bottom,
        left: rect.left,
        width: rect.width || rect.right - rect.left,
        height: rect.height || rect.bottom - rect.top
    }
}

client Width/client Height
境界を含まないスクロールバーのサイズを返します.

document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight

document.documentElementであれば、スクロールバーを含まないビューサイズ

を返します.

Dcument.bodyであり、混雑モードである場合、スクロールバーを含まないビューサイズ

が返される.
clientLeft/clientTop
計算されたCSSスタイルのborder-left-width/border-top-widthの値を返します.フレームの幅です.
offset Width/offset Height
同様に、Offset Width/offset Heightを使用して要素がスクロールバーとフレームのサイズを含むことを取得することができ、この方法は要素自体の幅の高さ＋padding＋border＋スクロールバーを返す.
offset Left/offset Top
最近の祖先位置決め要素(CSS position属性がrelative、absoluteまたはfixedの要素として設定されている)に対する左右のオフセット値
offset Left/offset Topは要素X Y座標値を返します.
要素の位置を計算します.

function getElementPosition(e) {
    var x = 0, y = 0;
    while (e != null) {
        x += e.offsetLeft;
        y += e.offsetTop;
        e = e.offsetParent; //            
    }
    return {
        x: x,
        y: y
    };
}

要素の内容の幅の高さとスクロール距離
scrollwidth/scrollHeight
この方法は元素の内容領域の幅の高さ＋padding＋オーバーフロー内容のサイズを返します.

document.documentElement.scrollWidth || document.body.scrollWidth
document.documentElement.scrollHeight || document.body.scrollHeight

要素がdocument.documentElementであれば、戻ってくるのは、視角スクロール領域幅と視認口幅の大きな

である.

要素がdocument.bodyであり、混淆モードである場合、戻り値は、視口スクロール領域幅と視口幅の大きな

である.
scrollLeft/scrollTop
この方法は元素のスクロールバーの位置を返します.

要素がルート要素である場合、window.scrollyの値

に戻る.

要素がbodyであり、混雑モードである場合、リターンはwindow.scrollyの値

である.
したがって、ページスクロールの距離の対応に使用できます.
私の購読番号に注目してください.JSに関する技術記事を不定期に押して送ります.技術だけを話して、ゴシップをしません.