javascript - 视口(viewport)大小和滚动

Question

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

为此，我需要总页面高度/宽度和垂直/水平滚动量。

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

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

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

非常感谢您!

我开始使用此处发布的答案: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;
}

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