1

我正在尝试创建一个脚本，根据滚动查找窗口视口左上角和右下角的坐标。

为了实现这一点，我需要总页面高度/宽度和垂直/水平滚动量。

我的问题是有太多不同的属性可以应用于window, document, body, ... 等。我不是在谈论不同的浏览器。

所以基本上我的问题如下：

  • 我可以在没有 jQuery 的情况下以跨浏览器兼容的方式获得总页面高度/宽度、视口大小和垂直/水平滚动量吗？

非常感谢您！

我开始使用此处发布的答案：JavaScript get window X/Y position for scroll 但这只是我认为的整个答案的一部分。

4

2 回答 2

2

这是我过去在需要使用非 jQuery 方法来识别最终用户屏幕大小时使用的方法。它远非完美，但我发现它达到了最高点并且适用于大多数浏览器。它也不会得到确切的尺寸，但如果你只是关心在屏幕上显示所有内容，这对我有用。

// Function to get the height of the end user's window
function getWindowHeight() {
    var winHeight = 0;
    // Check for common mobile browser
    if ((screen.width < 300)||(screen.height < 300)) {
        if (( window.outerHeight != undefined )||( window.outerHeight > 100 )){
            winHeight = window.outerHeight;
        }
        else{
            winHeight = screen.Height;
        }
    }
    // If not, check to see what Browser is being used.
    else {
        if( typeof (window.innerWidth ) == 'number') {
            //Non-IE
            winHeight = window.innerHeight;
        } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight )) {
            //IE 6+ in 'standards compliant mode'
            winHeight = document.documentElement.clientHeight;
        } else if(document.body && (document.body.clientWidth || document.body.clientHeight )) {
            //IE 4 compatible
                winHeight = document.body.clientHeight;
        } else if(screen.height == 'number'){
            //IE Mobile 6.0
            winHeight = screen.height;
        }
    }
    return winHeight;
}


// Function to get the width of the end user's window
function getWindowWidth() {
    var winWidth = 0;
    // Check for common mobile browser
    if (input == "yes"){
        if (( window.outerWidth != undefined )||( window.outerWidth > 100 )){
            winWidth = window.outerWidth;
        }
        else{
            winWidth = screen.width;
        }
    }
    // If not, check to see what Browser is being used. 
    else {          
        if( typeof (window.innerWidth ) == 'number') {
            //Non-IE
            winWidth = window.innerWidth;
        } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight )) {
            //IE 6+ in 'standards compliant mode'
            winWidth = document.documentElement.clientWidth;
        } else if(document.body && (document.body.clientWidth || document.body.clientHeight )) {
            //IE 4 compatible
            winWidth = document.body.clientWidth;
        } else if(screen.width == 'number'){
            //IE Mobile 6.0
            winWidth = screen.width;
        }
    }
    return winWidth;
}

如果您希望它包含所有选项，则需要添加更多内容，但希望这会让您有所收获。

于 2012-11-05T19:43:32.233 回答
0

获取总页面高度/宽度

只需使用document.documentElement.scrollWidth和scrollHeight

视口大小

有 2 种尺寸：带或不带滚动条。要使用滚动条获取视口大小，请使用：

var viewportWidthWithScrollbars = window.innerWidth || document.documentElement.offsetWidth;（更改innerHeight为offsetHeight高度）

innerWidth适用于 W3C 浏览器和offsetWidth标准模式下的 IE。

要获得没有滚动条的视口大小（这可能是您需要的），请使用：

var viewportWidthWithoutScrollbars = document.documentElement.clientWidth;

垂直/水平滚动量

这是棘手的部分。除了 Chrome 使用documentElement.scrollLeft和 Chrome（以及 IE 处于 quirks 模式）之外的所有浏览器都使用document.body.scrollLeft，所以我们必须检查这两个值：

var pageScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

我在与 W3C 兼容的浏览器（Opera、FF、Chrome）和带有 doctype 的 IE 8 中测试了这些方法（即仅在标准兼容模式下）。我没有在 quirks 模式下测试代码，但无论如何使用 quirks 模式是一个非常糟糕的主意。如果您仍想使用它，我想您必须检查属性body而不是documentElement.

我将此页面作为参考：http ://www.quirksmode.org/dom/w3c_cssom.html

您可以使用此页面在任何其他浏览器中进行测试：http: //jsbin.com/obewib/1

于 2013-02-09T15:23:41.743 回答