BOM-各種寬高

Yuanf 發(fā)布于2019-08-29 16:17 / 3445人閱讀

摘要：表示元素可見(jiàn)課件內(nèi)容的高度，包括以下幾部分可見(jiàn)內(nèi)容包括的高度，隱藏內(nèi)容由于存在垂直滾動(dòng)條不被包括。

1. window下的寬高

獲取高度可以可以省略window

window.innerWidth，通過(guò)字面意思我們知道這是一個(gè)內(nèi)部的寬度，如果有滾動(dòng)條，則包含滾動(dòng)條的寬度

window.innerHeight，表示內(nèi)部可用的高度，如果有滾動(dòng)條，則包含滾動(dòng)條的高度

window.outWidth，整個(gè)窗口的寬度

window.outHeight，整個(gè)窗口的高度

此外還有window.screen下的寬度，主要是與屏幕間的距離

幾大差異

屬性名	描述	備注
window.innerHeight	瀏覽器的窗口高度，如果有水平滾動(dòng)條則包含滾動(dòng)條的高度	只讀屬性，IE8及以下不支持
document.documentElement.clientHeight	不包括滾動(dòng)條，包含html元素邊框
document.body.clientHeight	不包含滾動(dòng)條，不包含html和body的邊框和滾動(dòng)條

2. document下的寬高

首先來(lái)看一張各種尺寸的圖地址

document下一共有三種相關(guān)的寬高

與client相關(guān)的寬高

與offset相關(guān)的寬高

與scroll相關(guān)的寬高

offsetHeigth表示 VISIBLE content & padding + border + scrollbar，也就是內(nèi)容的可見(jiàn)區(qū)域加上padding和border和滾動(dòng)條（如果有）

clientHeight表示VISIBLE content & padding，也就是可見(jiàn)區(qū)域的高度加上padding

scrollHeight表示ENTIRE content & padding(visible or hidden)，也就是整個(gè)內(nèi)容的高度加上padding（可見(jiàn)或者隱藏）

當(dāng)我們給div設(shè)置寬度和高度時(shí)，我們其實(shí)設(shè)置的是content area的寬高，同理padding和border也是一樣,所以元素的總高度為content+margin+padding

1. offsetHeight

offsetHeight表示元素在HTML頁(yè)面當(dāng)中所占據(jù)的高度，當(dāng)使用開(kāi)發(fā)者工具，移到div上，所顯示的寬高即是實(shí)際占用的高度，包括以下幾部分：

可見(jiàn)內(nèi)容區(qū)的高度，隱藏的內(nèi)容由于存在滾動(dòng)條，不被包含

水平滾動(dòng)條的高度

頂部和底部的border

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

2. clientHeight

clientHeight表示元素可見(jiàn)課件內(nèi)容的高度，包括以下幾部分：

可見(jiàn)內(nèi)容（包括padding）的高度，隱藏內(nèi)容由于存在垂直滾動(dòng)條不被包括。

3. scrollHeight

scrollHeight表示可見(jiàn)/隱藏元素的總高度，包括以下幾部分：

可見(jiàn)內(nèi)容的高度包括padding

隱藏內(nèi)容的高度包括padding

不包括border和margin

在線demo

3. HTMLElement.scrollXXX屬性

下面的屬性均為只讀屬性,返回當(dāng)前元素相對(duì)scrollParent的距離

c.offsetLeft 和 c.offsetTop

一般指當(dāng)前元素的CSS邊框相對(duì)于其offsetParent的X和Y坐標(biāo)

c.offsetHeight 和 c.offsetWidth

當(dāng)前元素及其所有內(nèi)容的高度，寬度。

c.offsetParent

離當(dāng)前元素最近的定位元素，定位屬性包括relative,absolute等，標(biāo)準(zhǔn)模式下為html，怪異模式下為body

4. 兼容方案 1. 瀏覽器可視區(qū)寬高

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

2.當(dāng)前元素距離文檔頂部距離

當(dāng)offsetParent為body的時(shí)候，可以通過(guò)el.offsetTop確定距離文檔頂部的高度，可以使用下面的方法來(lái)判斷

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

3.滾動(dòng)(被卷去)的高度

兼容方案

window.pageYOffset是window.scrollY的別名

scrollTop表示距離scrollParent被卷去的距離，

scrollheight是元素的整個(gè)高度，包括overflow隱藏的部分

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

是否滾動(dòng)到底部

// 文檔高度 - 滾動(dòng)的高度 === 視口高度
ele.scrollHeight - ele.scrollTop === ele.clientHeight;

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

// 滾動(dòng)的高度
ele.scrollTop = Math.round(document.documentElement.scrollTop);

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

場(chǎng)景一：懶加載的實(shí)現(xiàn)

需要獲取的高度

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;

判斷圖片是否出現(xiàn)在視窗里面，主要有三個(gè)高度

當(dāng)前的body從頂部滾動(dòng)了多少距離 document.body.scrollTop

視窗的距離 window.innerHeight

當(dāng)前圖片距離頂部的距離 offsetTop

兩個(gè)常見(jiàn)的滾動(dòng)判定

頁(yè)面滾動(dòng)離開(kāi)首屏(這時(shí)可顯示回到頂部的按鈕): document.body.scrollTop > window.innerHeight

頁(yè)面滾動(dòng)到底部了(這時(shí)可去調(diào)接口獲取更多內(nèi)容)： 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
    },

場(chǎng)景二：滾動(dòng)到指定位置

// 滾動(dòng)到指定位置
window.scrollTo(0,100);
window.scroll(0,100);

// 計(jì)算垂直滾動(dòng)條的距離
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學(xué)習(xí)筆記：視口寬高、位置與滾動(dòng)高度