关于高度（宽度），几个比较麻烦的问题

tech
,

1. offsetHeight，cilentHeight和scrollHeight的区别

关于这三个属性在stackoverflow上有一个回答，表达相当的明白。

  • clientHeight
    元素可视区域的高度，包括元素可见部分的height和padding-top以及padding-bottom，不包括边框，滚动条。
  • offsetHeight
    在clientHeight的基础上，加上了border-top，border-bottom的大小以及滚动条的高度
  • scrollHeight
    元素整个内容的高度，包括元素的height和padding-top以及padding-bottom

附上原回答的图：
1.1 1.2

2. 滚动条

以高度为例。
考虑到兼容性、混杂模式等等问题，获取当前滚动条偏移量的方法一共有4种

  • document.documentElement.scrollTop
    除了IE6/7/8的混杂模式以外，所有浏览器均支持
  • document.body.scrollTop
    IE6/7/8的混杂模式时使用
  • window.pageYOffset
    除了IE6/7/8，所有浏览器均支持
  • window.scrollY
    MDN说，window.pageYOffset是window.scrollY的别名，但为了浏览器兼容问题，请使用window.pageYOffset…..

看起来很麻烦，但如果抛弃IE8及之前版本的话，可以直接使用window.pageYOffset
MDN提供的完整的兼容性方案：

1
2
3
4
5
6
7
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var x = supportPageOffset ? window.pageXOffset : 
            isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : 
            isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

3. screen的偏移量

这是一个firefox和IE产生的小问题，影响不大而且实际应用比较少（大概）
firefox不支持screenTop而IE不支持screenY (何必呢…)
这个倒是好办： let screenY = window.screenY || window.screenTop，水平方向同理。

4. 窗口大小

说起窗口大小，第一反应是window.innerHeight和window.innerWidth，这两个属性是浏览器窗口的内部尺寸，不包括状态栏工具栏等等东西，就是你能看到的窗口范围，但是它包括了滚动条的大小….
需要注意的是，IE6/7/8表示我们不支持这两个属性，要照顾这三兄弟的话，得用到第一个问题的clientHeight属性。
这属性明摆着，大家都支持，但是也如第一个问题中提到的，这个属性不包括了滚动条的宽或者高。

最后

浏览器兼容性导致了很多问题，网上的解释又是各有各的，我在搞清楚这些属性的区别的时候头好晕…
在看关于这些东西的时候产生的问题我都写了下来，以后有新的问题还会总结在这里
在这里附一篇文章，大漠老师翻译的，对viewports问题解释了很多，也是从这里搞清了不少东西。