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.

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 :

Ho can I get the total page height/width, the viewport size and the amount of vertial/horizontal scrolling in a cross browser compatible way without jQuery ?

Thank you a lot in advance !

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.

回答1:

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.

回答2:

get the total page height/width

Just use document.documentElement.scrollWidth and scrollHeight

the viewport size

There're 2 sizes: with or without scrollbars. To get viewport size with scrollbars, use:

var viewportWidthWithScrollbars = window.innerWidth || document.documentElement.offsetWidth; (change to innerHeight and offsetHeight for height)

innerWidth is for W3C browsers and offsetWidth for IE in standard mode.

To get the viewport size without scrollbars (that is what you probably need), use:

var viewportWidthWithoutScrollbars = document.documentElement.clientWidth;

the amount of vertial/horizontal scrolling

This is the tricky part. All browsers except for Chrome use documentElement.scrollLeft and Chrome (and IE in quirks mode) uses document.body.scrollLeft, so we have to check both values:

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

I tested these methods in W3C-compatible browsers (Opera, FF, Chrome) and IE 8 with doctype (i.e. only in standard-compiant mode). I didn't test the code in quirks mode, but it's very bad idea to use quirks mode anyway. If you still want to use it, I guess you have to check properties for body instead of documentElement.

I took this page for reference: http://www.quirksmode.org/dom/w3c_cssom.html

You can use this page for testing in any other browser: http://jsbin.com/obewib/1

来源：https://stackoverflow.com/questions/13238099/viewport-size-and-scrolling

标签

javascript

cross-browser