视口大小和滚动 [英] Viewport size and Scrolling

问题描述

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

I'm trying to create a script that finds the coordinates of the top-left and the bottom-right corners of the window viewport depending on the scrolling.

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

To achieve this I need the total page height/width and the amount of vertical/horizontal scrolling.

我的问题是，有很多不同的属性可以应用于窗口，文档， body 等。我不是在谈论不同的浏览器。

My problem is that there are so many different properties that can be applied to window, document, body, ...etc. I'm not event talking about the different browsers.

所以基本上我的问题是：

So basically my question is the following :

• 我如何在没有jQuery的情况下以跨浏览器兼容的方式获取页面的总高度/宽度，视口大小以及垂直/水平滚动量？

非常感谢！

我开始使用此处发布的答案： JavaScript获取滚动的窗口X / Y位置
，但这只是整个答案的一部分。

I started using the answer posted here : JavaScript get window X/Y position for scroll but it's just part of the whole answer I think.

推荐答案

这是我过去在需要使用非jQuery方式识别末端大小时使用的方法用户的屏幕。它远非完美，但我发现它在很多浏览器上都可以发挥很高的作用。它也不会得到确切的大小，但是如果您只关心在屏幕上显示所有内容，那么这对我有用。

This is what I have used in the past when I needed to use a non jQuery way of identifying the size of the end user's screen. It is far from perfect but I have found it hits the high spots and works on most browsers. It also won't get the exact size, but if you are just concerned about displaying everything on the screen this works for me.

// 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;
}

如果您希望包含所有内容，则需要添加更多内容那里有很多选择，但是希望这能带您到某个地方。

You'll need to add a lot more if you want it to encompass all of the options out there, but hopefully this will get you somewhere.

这篇关于视口大小和滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！