Question

我正在尝试在自定义框中显示错误，其中包含一些信息（行号，文件名...），在DIV内部覆盖页面的正文并避免与框外元素的交互。

这是DIV的CSS：

overlayStyle = {
    'position': 'absolute',
    'top': '0px',
    'left': '0px',
    'height': '100%',
    'width': '100%',
    'backgroundColor': 'rgba(199,199,199,0.7)',
    'display': 'block',
    'zIndex': '1000',
    'textAlign': 'center',
    'paddingTop': '5%'
}

我正在通过对文档的HEAD部分中不存在的文件进行AJAX调用来测试这一点，以便在文档加载时打开该框。这是onerror处理程序：

window.onerror = function ( msg, url, line ) {
    error ( msg, url, line );
    return true;
}

这是创建框的脚本的一部分：

var root = document.documentElement.scrollTop ? document.documentElement : document.body;
root.scrollTop = 0;

document.body.style.overflow = 'hidden';

在这里，我将文档滚动到顶部，以便仅显示覆盖的DIV，其中有0,0个坐标。

如果我关闭错误框，向下滚动页面并发送一个F5，页面重新加载滚动到底部，但覆盖DIV位于0,0所以我只看到它的底部。

那是因为scrollTop位置（我也试过window.scrollY）是0所以root.scrollTop = 0;不会产生任何影响。

任何正确定位DIV的方法（请不要jQuery）？

这是完整的代码：

function error ( msg, url, line ) {
    var overlay = document.createElement ( 'DIV' ),
    scrollPos = 0,
    root = document.documentElement.scrollTop ? document.documentElement : document.body,
    overlayId = 'divErrorOverlay',
    overlayStyle = {
            'position': 'absolute',
            'top': '0px',
            'left': '0px',
            'height': '100%',
            'width': '100%',
            'backgroundColor': 'rgba(199,199,199,0.7)',
            'display': 'block',
            'zIndex': '1000',
            'textAlign': 'center',
            'paddingTop': '5%'
    },
    errHead = null,
    errBody = null;

    overlay.setAttribute ( 'id', overlayId );
    for ( var i in overlayStyle ) overlay.style [ i ] = overlayStyle [ i ];

    scrollPos = root.scrollTop; //I use this to restore position when box is closed
    root.scrollTop = 0;

    document.body.appendChild ( overlay );
    document.body.style.overflow = 'hidden';

    //Calls to methods that creates header and body
}

javascript - 在window.onerror上获取正确的滚动位置

0 个答案: