视口大小和滚动

Question

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

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

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

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

• 我能否在不使用 jQuery 的情况下以跨浏览器兼容的方式获取总页面高度/宽度、视口大小和垂直/水平滚动量？

非常感谢您！

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

Answer 1

这是我过去在需要使用非 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;
}

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

Answer 2

获取页面总高度/宽度

只需使用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