javascript - （ビューポートではなく）画面上の要素の絶対位置を取得できますか？

Question

要素を画面上の絶対位置に配置して、ブラウザウィンドウが移動された（スクロールされていない）場合でも、要素が（ほぼ）同じ位置にとどまるようにします。そのようなことさえ可能ですか？

Answer 1

おそらく最も最適化されたソリューションではないかもしれませんが、間隔を使用してwindow.screenXandを確認できますwindow.screenY（コメントで提案されているように）。次に、それらの値が変更されたら、最後の位置との差を使用して位置を更新します。何かのようなもの：

function setPosition(el, x, y) {
    var style = window.getComputedStyle(el);
    el.style.left = parseInt(style.left) + x + "px";
    el.style.top = parseInt(style.top) + y + "px";
}

var sX = window.screenX,
    sY = window.screenY,
    box = document.getElementById("box");

var interval = setInterval(function() {
    if (window.screenX !== sX || window.screenY !== sY) {
        setPosition(box, sX - window.screenX, sY - window.screenY);
        sX = window.screenX;
        sY = window.screenY;
    }
}, 1000/30);

JSFiddleの例を次に示します。Chrome では少し不安定です。