如何将div注入到按窗口大小调整的网页中？

Question

本质上，我正在创建一个自定义的单击并拖动选择框。 问题是div的位置是绝对的，因此它会随着页面滚动，但是在调整窗口大小时它不会随页面移动。 我尝试的解决方案是听窗口调整大小，然后根据更改移动div。 问题在于它将使SEEM正常工作，但不能完全准确地移动，因此，如果缓慢调整窗口大小，它将缓慢移出适当位置；如果迅速调整窗口大小，它将迅速移出适当位置。 调整大小侦听器似乎无法捕获每个调整大小事件。 我已将代码缩小到我正在使用的概念。

尝试将此脚本注入到页面中（我使用的是Chrome控制台，但尚未尝试进行交叉兼容性，因为它将在Chrome扩展程序中使用）。 仅当滚动条不处于活动状态时，它才会尝试调整大小，以复制页面内容的行为。 client和scoll变量可以互换，以记录尺寸的变化，但是它们都用于测试目的。 我希望看到使用样式属性解决此问题的解决方案。 谢谢你的帮助！

var div = document.createElement("div");
div.style.position = "absolute";
div.style.backgroundColor = "#000";
div.style.width = div.style.height = div.style.left = div.style.top = "200px";
document.body.appendChild(div);

// get the highest z index of the document
function highestZIndex() {
    var elems = document.getElementsByTagName("*");
    var zIndex = 0;
    var elem, value;
    for (var i = 0; i < elems.length; i++) {
        value = parseInt(document.defaultView.getComputedStyle(elems[i], null).zIndex, 10);
        if (value > zIndex) {
            zIndex = value;
            elem = elems[i];
        }
    }
    return {
        elem: elem,
        zIndex: zIndex
    };
}

// set the div on top if it is not already
var highestZ = highestZIndex();
if (highestZ.elem != div) div.style.zIndex = highestZ.zIndex + 1;

// last width & height of client & scroll to calculate the change in dimensions
var clientWidth = document.body.clientWidth;
var clientHeight = document.body.clientHeight;
var scrollWidth = document.body.scrollWidth;
var scrollHeight = document.body.scrollHeight;

// move the div when the window is being resized
function resizeListener() {
    var _clientWidth = document.body.clientWidth;
    var _clientHeight = document.body.clientHeight;
    var _scrollWidth = document.body.scrollWidth;
    var _scrollHeight = document.body.scrollHeight;
    // horizontal scrollbar is not enabled
    if (_scrollWidth <= _clientWidth) {
        div.style.left = parseInt(div.style.left.replace(/px/, ''), 10) + (_scrollWidth - scrollWidth) / 2 + 'px';
    }
    // vertical scrollbar is not enabled
    if (_scrollHeight <= _clientHeight) {
        div.style.top = parseInt(div.style.top.replace(/px/, ''), 10) + (_scrollHeight - scrollHeight) / 2 + 'px';
    }
    clientWidth = _clientWidth;
    clientHeight = _clientHeight;
    scrollWidth = _scrollWidth;
    scrollHeight = _scrollHeight;
}
window.addEventListener("resize", resizeListener);

PS：请，没有jQuery解决方案。

Answer 1

由于调整大小的侦听器对外部事件不太可靠，因此我开发了一个简单的“ hack”来获得所需的结果。 强制窗口溢出滚动，并且将主体的宽度和高度设置为+1，以使滚动条处于活动状态，然后div会留在原处。 调整大小完成后，溢流和阀体尺寸将恢复。 对于希望div手动调整窗口大小的其他人来说，这可能不是理想的解决方案，但是我正在从JavaScript调用调整大小，因此它非常适合我。

实践中的脚本：

 var overflow, overflowX, overflowY, bodyWidth, bodyHeight;

 function startResize() {
     // store the original overflow values
     overflow = document.body.style.overflow;
     overflowX = document.body.style.overflowX;
     overflowY = document.body.style.overflowY;
     bodyWidth = document.body.style.width;
     bodyHeight = document.body.style.height;
     // force the scrollbar
     document.body.style.overflow = "scroll";
     // activate the scrollbar
     document.body.style.width = document.client.width + 1 + "px";
     document.body.style.height = document.client.height + 1 + "px";
 }

 function stopResize() {
     // restore the original overflow values; x & y are included because enabling the global overflow will update x and y
     document.body.style.overflow = overflow;
     document.body.style.overflowX = overflowX;
     document.body.style.overflowY = overflowY;
     // restore the original body width & height
     document.body.style.width = bodyWidth;
     document.body.style.height = bodyHeight;
 }