在JavaScript中被文档维度所困惑

Question

我真的很困惑JavaScript中存在的不同属性,用于获取文档的尺寸以及如何获取这些数字.有人可以推荐一个好地方开始了解我如何获得文档的大小和正确定位的东西？

Answer 1

我会尝试尽可能简单地回答.

文档和视口

在几何方面,有两组维度需要注意; 文档尺寸,反映加载页面的整个大小,包括窗口底部以外的内容和视口尺寸,它们反映了窗口中立即显示的文档可见部分的大小.

向下滚动时,视口向下移动文档一定数量的像素.换句话说,视口是实际的浏览器窗口"边框"(工具栏,菜单,标签等).

混淆来自这样的事实:取决于浏览器和模式,不同的属性用于获取文档和视口的尺寸,并且它们根据滚动条返回不同的结果.但我们会回到这一点.

尺寸概述

您可以通过javascript中的get-go获得许多属性,这些属性可以为您提供不同的维度.

1. 屏幕分辨率: window.screen.width -Height

2. 可用的屏幕空间(与显示器分辨率相同)减去底座,工具栏和其他UI元素: window.screen.availWidth -Height.

3. 文档尺寸: document.documentElement.offsetWidth -Height 注意:这些数字不包括滚动条.

4. 视口尺寸: window.innerWidth -Height

   • 这些数字包括滚动条.

   • 这在IE 8-和IE9中不可用,因此如果是IE,则测试document.compatMode === "CSS1Compat"是否为true,使用document.documentElement.clientWidth -Height和for quirks模式使用document.body.clientWidth -Height.

关于文档尺寸的说明

如上所述,document.documentElement.offsetWidth/Height为您提供文档的实际大小.有一点需要注意的是,滚动条在浏览器之间的工作方式不同.例如,即使文档高度小于视口高度,IE9也将始终显示垂直滚动条.Safari/Chrome在OS X Lion上没有滚动条.除非需要,否则PC上的Chrome将不会显示垂直滚动条.

因此,您可能会遇到不一致的情况,并且滚动条会改变内容问题.想象一下,你有一个绝对定位和居中的元素.因为CSS计算相对于文档尺寸而不是视口尺寸的"中心",所以当Google添加滚动条时,当"文档中心"发生变化时,您的内容可能会向左"跳"一点.所以你可能需要编写JS以补偿这种影响,如果它困扰你,或者这里的某人可以写一个快速的JS函数来计算包含滚动条的文档尺寸.

滚动条位置和尺寸

虽然JavaScript中的某些方法使用文档坐标,但其他方法使用视口坐标,而这通常不是您想要的.例如,如果文档坐标中的元素顶边为20px,并且向下滚动页面20px,则该元素的上边缘将相对于顶部视口坐标为0px.因此,要在两个系统之间进行转换,首先需要知道用户滚动文档的像素数,然后将该数字添加到视口以进行补偿(请参见下面的示例).

我也发现这些有用:

http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

http://www.quirksmode.org/mobile/viewports.html

这是一个快速的跨浏览器模块,我可以帮助你:

var dimensions = (function(){

    var dims = {};

    // get screen width/height:
    dims.screenWidth = function() { window.screen.width };
    dims.screenHeight = function() { return window.screen.height };

    // get screen width/height minus chrome:
    dims.availWidth = function() { return window.screen.availWidth };
    dims.availHeight = function() { return window.screen.availHeight };

    // get document width/height (with-out scrollbars):
    if (window.document.compatMode == "CSS1Compat"){ // if IE Standards Mode
        dims.documentWidth = function() { return document.body.offsetWidth };
        dims.documentHeight = function() { return document.body.offsetHeight };
    }
    else {
        dims.documentWidth = function() { return document.documentElement.offsetWidth };
        dims.documentHeight = function() { return document.documentElement.offsetHeight };
    }

    // get viewport width/height (with scrollbars):
    if (window.innerWidth != null) {
        dims.viewportWidth = function () { return window.innerWidth };
        dims.viewportHeight = function () { return window.innerHeight };
    }

        // if IE in Standards Mode
        else if (window.document.compatMode == "CSS1Compat"){
            dims.viewportWidth = function () { 
                return window.document.documentElement.clientWidth
            };
            dims.viewportHeight = function () { 
                return window.document.documentElement.clientHeight
            };
        }

    // get scrollbar offsets:
    if (window.pageXOffset != null) {
        dims.scrollXOffset = function() { return window.pageXOffset };
        dims.scrollYOffset = function() { return window.pageYOffset };
    }

        // if IE in Standards Mode
        else if (window.document.compatMode == "CSS1Compat"){
            dims.scrollXOffset = function() { return document.documentElement.scrollLeft };
            dims.scrollYOffset = function() { return document.documentElement.scrollTop };  
        }

    return dims;
}());

例如,您可以console.log(dimensions.viewportWidth())获取视口宽度.

希望这可以帮助你:)