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

Question

Essentially, I'm creating a custom click & drag selection box. The problem is that the div is position absolutely, so it will scroll with the page, but it will not move with the page when the window is being resized. My attempted solution was to listen to the window resize, and move the div according to the change. The problem is that it will SEEM to work, but it will not move entirely accurately, so it will slowly move out of place if the window is resized slowly, or quickly move out of place if the window is resized quickly. It seems that the resize listener does not capture every resize event. I've narrowed the code down to the concept I'm using.

Try injecting this script into a page (I'm using the Chrome console and I haven't made any attempt for cross-compatibility because this will be used in a Chrome extension). It will attempt to resize only when the scrollbar is not active, to replicate the behavior of the page content. The client and scoll variables are interchangeable for recording the change in dimensions, but they are both there for testing purposes. I would love to see a solution which solves this problem using styling attributes. Thanks for your help!

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: Please, no jQuery solutions.

Answer 1

Since the resize listener isn't quite dependable with outside events, I've developed a simple "hack" to get the wanted results. The window overflow is forced to scroll and the body width & height are set to +1 so that the scrollbar is active, in which the div will then stay in place. Once the resize is complete, the overflow and body dimensions are restored. This may not be a desired solution for others who want the div to move on a manual window resize, but I am invoking the resize from JavaScript so it works perfectly for me.

The script in practice:

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