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）使用document.body.scrollLeft，因此我们必须检查这两个值：

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

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

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

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

视口大小和滚动

2 个答案: