BOM-各种宽高

1. window下的宽高

获取高度可以可以省略window

• window.innerWidth，通过字面意思我们知道这是一个内部的宽度，如果有滚动条，则包含滚动条的宽度
• window.innerHeight，表示内部可用的高度，如果有滚动条，则包含滚动条的高度
• window.outWidth，整个窗口的宽度
• window.outHeight，整个窗口的高度

此外还有window.screen下的宽度，主要是与屏幕间的距离

几大差异

属性名	描述	备注
window.innerHeight	浏览器的窗口高度，如果有水平滚动条则包含滚动条的高度	只读属性，IE8及以下不支持
document.documentElement.clientHeight	不包括滚动条，包含html元素边框
document.body.clientHeight	不包含滚动条，不包含html和body的边框和滚动条

2. document下的宽高

首先来看一张各种尺寸的图地址

document下一共有三种相关的宽高

1. 与client相关的宽高
2. 与offset相关的宽高
3. 与scroll相关的宽高

• offsetHeigth表示 VISIBLE content & padding + border + scrollbar，也就是内容的可见区域加上padding和border和滚动条（如果有）
• clientHeight表示VISIBLE content & padding，也就是可见区域的高度加上padding
• scrollHeight表示ENTIRE content & padding(visible or hidden)，也就是整个内容的高度加上padding（可见或者隐藏）

当我们给div设置宽度和高度时，我们其实设置的是content area的宽高，同理padding和border也是一样,所以元素的总高度为content+margin+padding

1. offsetHeight

offsetHeight表示元素在HTML页面当中所占据的高度，当使用开发者工具，移到div上，所显示的宽高即是实际占用的高度，包括以下几部分：

• 可见内容区的高度，隐藏的内容由于存在滚动条，不被包含
• 水平滚动条的高度
• 顶部和底部的border

margin由于是隔离元素的一部分，因此不被包含。

2. clientHeight

clientHeight表示元素可见课件内容的高度，包括以下几部分：

• 可见内容（包括padding）的高度，隐藏内容由于存在垂直滚动条不被包括。

3. scrollHeight

scrollHeight表示可见/隐藏元素的总高度，包括以下几部分：

• 可见内容的高度包括padding
• 隐藏内容的高度包括padding
• 不包括border和margin

在线demo

3. HTMLElement.scrollXXX属性

下面的属性均为只读属性,返回当前元素相对scrollParent的距离

• c.offsetLeft 和 c.offsetTop

一般指当前元素的CSS边框相对于其offsetParent的X和Y坐标

• c.offsetHeight 和 c.offsetWidth

当前元素及其所有内容的高度，宽度。

• c.offsetParent

离当前元素最近的定位元素，定位属性包括relative,absolute等，标准模式下为html，怪异模式下为body

4. 兼容方案

1. 浏览器可视区宽高

let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth

2.当前元素距离文档顶部距离

当offsetParent为body的时候，可以通过el.offsetTop确定距离文档顶部的高度，可以使用下面的方法来判断

function getTop(el) {
  let top = el.offsetTop;
  let currentParent = el.offsetParent;
  while (currentParent != null) {
    top += currentParent.offsetTop;
    currentParent = currentParent.offsetParent;
  }
  return top;
}

3.滚动(被卷去)的高度

兼容方案

• window.pageYOffset是window.scrollY的别名
• scrollTop表示距离scrollParent被卷去的距离，
• scrollheight是元素的整个高度，包括overflow隐藏的部分

var x = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
var y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

是否滚动到底部

// 文档高度 - 滚动的高度 === 视口高度
ele.scrollHeight - ele.scrollTop === ele.clientHeight;

// 文档高度，包括padding，不包括border
ele.scrollHeight = document.documentElement.scrollheight;

// 滚动的高度
ele.scrollTop = Math.round(document.documentElement.scrollTop);

// 视口高度
ele.clientHeight = document.documentElement.clientHeight;

场景一： 懒加载的实现

需要获取的高度

var clientY = window.innerheight || document.documentElement.clientheight || document.body.clientHeight;


// 兼容方案
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;

判断图片是否出现在视窗里面，主要有三个高度

1. 当前的body从顶部滚动了多少距离 document.body.scrollTop
2. 视窗的距离 window.innerHeight
3. 当前图片距离顶部的距离 offsetTop

两个常见的滚动判定

1. 页面滚动离开首屏(这时可显示回到顶部的按钮): document.body.scrollTop > window.innerHeight
2. 页面滚动到底部了(这时可去调接口获取更多内容)： window.scrollY + window.innerHeight > document.body.scrollHeight

    function isBottomVisible () {
      var scrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      var clientY = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      var pageY = document.documentElement.scrollHeight || document.body.scrollHeight; 
      // console.log(scrollY,clientY,pageY);
      
      return Math.round(scrollY) + clientY === pageY
    },

场景二：滚动到指定位置

// 滚动到指定位置
window.scrollTo(0,100);
window.scroll(0,100);

// 计算垂直滚动条的距离
if (document.body.clientWidth !== window.innerWidth) {
    var scrollHeight = window.innerWidth - document.body.clientWidth;
}

// 滚到顶部
if (window.scrollY) {
    window.scroll(0,0);
}

Reference

• SRC
• MDN
• blog
• size and scroll window
• size and scroll
• JavaScript学习笔记：视口宽高、位置与滚动高度
• SF