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