摘要:表示元素可見課件內容的高度,包括以下幾部分可見內容包括的高度,隱藏內容由于存在垂直滾動條不被包括。
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的邊框和滾動條 |
首先來看一張各種尺寸的圖地址
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. offsetHeightoffsetHeight表示元素在HTML頁面當中所占據的高度,當使用開發者工具,移到div上,所顯示的寬高即是實際占用的高度,包括以下幾部分:
可見內容區的高度,隱藏的內容由于存在滾動條,不被包含
水平滾動條的高度
頂部和底部的border
margin由于是隔離元素的一部分,因此不被包含。
2. clientHeightclientHeight表示元素可見課件內容的高度,包括以下幾部分:
可見內容(包括padding)的高度,隱藏內容由于存在垂直滾動條不被包括。
3. scrollHeightscrollHeight表示可見/隱藏元素的總高度,包括以下幾部分:
可見內容的高度包括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.clientWidth2.當前元素距離文檔頂部距離
當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學習筆記:視口寬高、位置與滾動高度
SF
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52799.html
摘要:表示元素可見課件內容的高度,包括以下幾部分可見內容包括的高度,隱藏內容由于存在垂直滾動條不被包括。 1. window下的寬高 獲取高度可以可以省略window window.innerWidth,通過字面意思我們知道這是一個內部的寬度,如果有滾動條,則包含滾動條的寬度 window.innerHeight,表示內部可用的高度,如果有滾動條,則包含滾動條的高度 window.o...
摘要:在中我們需要掌握定時器。定時器不是我們調用,我們只需要把函數的地址傳過去,時間到了,會自己調用。參數延時的時間單位毫秒返回定時器的,用于清除示例代碼延時定時器秒后將執行的代碼。 showImg(https://segmentfault.com/img/remote/1460000012575821?w=1920&h=1080); 前言 本篇文章是JavaScript基礎知識的BOM篇,...
摘要:在中我們需要掌握定時器。定時器不是我們調用,我們只需要把函數的地址傳過去,時間到了,會自己調用。參數延時的時間單位毫秒返回定時器的,用于清除示例代碼延時定時器秒后將執行的代碼。 showImg(https://segmentfault.com/img/remote/1460000012575821?w=1920&h=1080); 前言 本篇文章是JavaScript基礎知識的BOM篇,...
閱讀 3044·2021-11-19 11:31
閱讀 3129·2021-09-02 15:15
閱讀 985·2019-08-29 17:22
閱讀 1058·2019-08-29 16:38
閱讀 2464·2019-08-26 13:56
閱讀 833·2019-08-26 12:16
閱讀 1435·2019-08-26 11:29
閱讀 929·2019-08-26 10:12