BOM-各種寬高

Yuanf 發布于2019-08-29 16:17 / 3660人閱讀

摘要：表示元素可見課件內容的高度，包括以下幾部分可見內容包括的高度，隱藏內容由于存在垂直滾動條不被包括。

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下一共有三種相關的寬高

與client相關的寬高

與offset相關的寬高

與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;

判斷圖片是否出現在視窗里面，主要有三個高度

當前的body從頂部滾動了多少距離 document.body.scrollTop

視窗的距離 window.innerHeight

當前圖片距離頂部的距離 offsetTop

兩個常見的滾動判定

頁面滾動離開首屏(這時可顯示回到頂部的按鈕): document.body.scrollTop > window.innerHeight

頁面滾動到底部了(這時可去調接口獲取更多內容)： 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學習筆記：視口寬高、位置與滾動高度

GPU云服務器云服務器 BOM bom編碼批量去除bom 批量刪除BOM頭

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/113645.html

BOM-各種寬高

摘要：表示元素可見課件內容的高度，包括以下幾部分可見內容包括的高度，隱藏內容由于存在垂直滾動條不被包括。 1. window下的寬高獲取高度可以可以省略window window.innerWidth，通過字面意思我們知道這是一個內部的寬度，如果有滾動條，則包含滾動條的寬度 window.innerHeight，表示內部可用的高度，如果有滾動條，則包含滾動條的高度 window.o...

MageekChiu 2019-08-23 10:45 評論0 收藏0
BOM-各種寬高

摘要：表示元素可見課件內容的高度，包括以下幾部分可見內容包括的高度，隱藏內容由于存在垂直滾動條不被包括。 1. window下的寬高獲取高度可以可以省略window window.innerWidth，通過字面意思我們知道這是一個內部的寬度，如果有滾動條，則包含滾動條的寬度 window.innerHeight，表示內部可用的高度，如果有滾動條，則包含滾動條的高度 window.o...

fantix 2019-08-02 11:09 評論0 收藏0
前端開發

摘要：前端開發前端概述一什么是前端前端即網絡站前臺部分，運行在端，移動端等瀏覽器上展現給用戶瀏覽的頁面。文件后綴前端三劍客一標記語言標記語言為非標記語言，不具備編程語言具備的程序邏輯為前端頁面的主體，有標簽指令與轉義字符等組成。前端開發前端概述一、什么是前端前端即網絡站前臺部分，運行在pc端，移動端等瀏覽器上展現給用戶瀏覽的頁面。隨著互聯網技術的發展，HTML5,CSS3,前端框架的應用，...

SQC 2019-04-23 13:22 評論0 收藏0
JavaScript 基礎知識 - BOM篇

摘要：在中我們需要掌握定時器。定時器不是我們調用，我們只需要把函數的地址傳過去，時間到了，會自己調用。參數延時的時間單位毫秒返回定時器的，用于清除示例代碼延時定時器秒后將執行的代碼。 showImg(https://segmentfault.com/img/remote/1460000012575821?w=1920&h=1080); 前言本篇文章是JavaScript基礎知識的BOM篇，...

garfileo 2019-08-01 18:16 評論0 收藏0
JavaScript 基礎知識 - BOM篇

摘要：在中我們需要掌握定時器。定時器不是我們調用，我們只需要把函數的地址傳過去，時間到了，會自己調用。參數延時的時間單位毫秒返回定時器的，用于清除示例代碼延時定時器秒后將執行的代碼。 showImg(https://segmentfault.com/img/remote/1460000012575821?w=1920&h=1080); 前言本篇文章是JavaScript基礎知識的BOM篇，...

Object 2019-08-21 18:24 評論0 收藏0