Javascript 如何将div插入到随窗口大小调整而移动的网页中？

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

尝试将此脚本注入页面（我使用的是Chrome控制台，我没有进行任何交叉兼容性尝试，因为这将在Chrome扩展中使用）。它将仅在滚动条未激活时尝试调整大小，以复制页面内容的行为。客户机变量和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);

var div=document.createElement（“div”）；
div.style.position=“绝对”；
div.style.backgroundColor=“#000”；
div.style.width=div.style.height=div.style.left=div.style.top=“200px”；
文件.正文.附件（div）；
//获取文档的最高z索引
函数highestZIndex（）{
var elems=document.getElementsByTagName（“*”）；
var-zIndex=0；
变量，价值；
对于（变量i=0；izIndex）{
zIndex=数值；
元素=元素[i]；
}
}
返回{
艾琳：艾琳，
zIndex:zIndex
};
}
//如果尚未设置div，则将其设置在顶部
var highestZ=highestZIndex（）；
如果（highestZ.elem！=div）div.style.zIndex=highestZ.zIndex+1；
//客户端的最后宽度和高度&滚动以计算尺寸变化
var clientWidth=document.body.clientWidth；
var clientHeight=document.body.clientHeight；
var scrollWidth=document.body.scrollWidth；
var scrollHeight=document.body.scrollHeight；
//调整窗口大小时移动div
函数resizeListener（）{
var\u clientWidth=document.body.clientWidth；
var_clientHeight=document.body.clientHeight；
var\u scrollWidth=document.body.scrollWidth；
var _scrollHeight=document.body.scrollHeight；
//水平滚动条未启用
如果（_scrollWidth因为resize侦听器对外部事件不太可靠，我开发了一个简单的“hack”以获得想要的结果。强制滚动窗口溢出，并将主体宽度和高度设置为+1，以便滚动条处于活动状态，此时div将保持在原位。一旦完成调整大小，溢出和主体尺寸将恢复。对于其他希望div在手动windo上移动的人来说，这可能不是理想的解决方案w resize，但是我正在从JavaScript调用resize，所以它对我来说非常适合

实践中的脚本：

 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;
 }

你能更清楚地说明你希望div的行为方式吗？如果用户垂直/水平滚动，它会一直显示在你的视野中吗？我假设你不希望出现类似于
position:fixed
？@Zeaklous是的，fixed只会使问题具体化。我想最好的解释方法是提供一个例子。请尝试www.nytimes.comeen，并注入提供的脚本。当您在页面上上下滚动时，div将随页面一起移动。这是一个理想的结果。但是，当窗口最小化或调整大小时，如果滚动条不可见，则主体将移动。当主体移动时，脚本将尝试使div与主体保持同步，但不会执行性能调整t job。在有侦听器的情况下和没有侦听器的情况下尝试一下，你就会明白我在说什么。我尝试注入一个JSFIDLE，而if语句从未包含在内：对我来说，滚动宽度似乎总是比clientwidth大8px。因此，新的左值和顶值从未更改