javascript - 如何将 div 注入(inject)随窗口调整大小移动的网页？

Question

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

尝试将此脚本注入(inject)页面(我使用的是 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;
 }