摘要:表示元素可見課件內(nèi)容的高度,包括以下幾部分可見內(nèi)容包括的高度,隱藏內(nèi)容由于存在垂直滾動條不被包括。
1. window下的寬高
獲取高度可以可以省略window
window.innerWidth,通過字面意思我們知道這是一個內(nèi)部的寬度,如果有滾動條,則包含滾動條的寬度
window.innerHeight,表示內(nèi)部可用的高度,如果有滾動條,則包含滾動條的高度
window.outWidth,整個窗口的寬度
window.outHeight,整個窗口的高度
此外還有window.screen下的寬度,主要是與屏幕間的距離
幾大差異
屬性名 | 描述 | 備注 |
---|---|---|
window.innerHeight | 瀏覽器的窗口高度,如果有水平滾動條則包含滾動條的高度 | 只讀屬性,IE8及以下不支持 |
document.documentElement.clientHeight | 不包括滾動條,包含html元素邊框 | |
document.body.clientHeight | 不包含滾動條,不包含html和body的邊框和滾動條 |
首先來看一張各種尺寸的圖地址
document下一共有三種相關(guān)的寬高
與client相關(guān)的寬高
與offset相關(guān)的寬高
與scroll相關(guān)的寬高
offsetHeigth表示 VISIBLE content & padding + border + scrollbar,也就是內(nèi)容的可見區(qū)域加上padding和border和滾動條(如果有)
clientHeight表示VISIBLE content & padding,也就是可見區(qū)域的高度加上padding
scrollHeight表示ENTIRE content & padding(visible or hidden),也就是整個內(nèi)容的高度加上padding(可見或者隱藏)
當(dāng)我們給div設(shè)置寬度和高度時,我們其實設(shè)置的是content area的寬高,同理padding和border也是一樣,所以元素的總高度為content+margin+padding
1. offsetHeightoffsetHeight表示元素在HTML頁面當(dāng)中所占據(jù)的高度,當(dāng)使用開發(fā)者工具,移到div上,所顯示的寬高即是實際占用的高度,包括以下幾部分:
可見內(nèi)容區(qū)的高度,隱藏的內(nèi)容由于存在滾動條,不被包含
水平滾動條的高度
頂部和底部的border
margin由于是隔離元素的一部分,因此不被包含。
2. clientHeightclientHeight表示元素可見課件內(nèi)容的高度,包括以下幾部分:
可見內(nèi)容(包括padding)的高度,隱藏內(nèi)容由于存在垂直滾動條不被包括。
3. scrollHeightscrollHeight表示可見/隱藏元素的總高度,包括以下幾部分:
可見內(nèi)容的高度包括padding
隱藏內(nèi)容的高度包括padding
不包括border和margin
在線demo
3. HTMLElement.scrollXXX屬性下面的屬性均為只讀屬性,返回當(dāng)前元素相對scrollParent的距離
c.offsetLeft 和 c.offsetTop
一般指當(dāng)前元素的CSS邊框相對于其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.clientWidth2.當(dāng)前元素距離文檔頂部距離
當(dāng)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;場景一: 懶加載的實現(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)在視窗里面,主要有三個高度
當(dāng)前的body從頂部滾動了多少距離 document.body.scrollTop
視窗的距離 window.innerHeight
當(dāng)前圖片距離頂部的距離 offsetTop
兩個常見的滾動判定
頁面滾動離開首屏(這時可顯示回到頂部的按鈕): document.body.scrollTop > window.innerHeight
頁面滾動到底部了(這時可去調(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 },場景二:滾動到指定位置
// 滾動到指定位置 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學(xué)習(xí)筆記:視口寬高、位置與滾動高度
SF
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/113645.html
摘要:表示元素可見課件內(nèi)容的高度,包括以下幾部分可見內(nèi)容包括的高度,隱藏內(nèi)容由于存在垂直滾動條不被包括。 1. window下的寬高 獲取高度可以可以省略window window.innerWidth,通過字面意思我們知道這是一個內(nèi)部的寬度,如果有滾動條,則包含滾動條的寬度 window.innerHeight,表示內(nèi)部可用的高度,如果有滾動條,則包含滾動條的高度 window.o...
摘要:前端開發(fā)前端概述一什么是前端前端即網(wǎng)絡(luò)站前臺部分,運行在端,移動端等瀏覽器上展現(xiàn)給用戶瀏覽的頁面。文件后綴前端三劍客一標(biāo)記語言標(biāo)記語言為非標(biāo)記語言,不具備編程語言具備的程序邏輯為前端頁面的主體,有標(biāo)簽指令與轉(zhuǎn)義字符等組成。前端開發(fā) 前端概述 一、什么是前端 前端即網(wǎng)絡(luò)站前臺部分,運行在pc端,移動端等瀏覽器上展現(xiàn)給用戶瀏覽的頁面。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展,HTML5,CSS3,前端框架的應(yīng)用,...
摘要:在中我們需要掌握定時器。定時器不是我們調(diào)用,我們只需要把函數(shù)的地址傳過去,時間到了,會自己調(diào)用。參數(shù)延時的時間單位毫秒返回定時器的,用于清除示例代碼延時定時器秒后將執(zhí)行的代碼。 showImg(https://segmentfault.com/img/remote/1460000012575821?w=1920&h=1080); 前言 本篇文章是JavaScript基礎(chǔ)知識的BOM篇,...
摘要:在中我們需要掌握定時器。定時器不是我們調(diào)用,我們只需要把函數(shù)的地址傳過去,時間到了,會自己調(diào)用。參數(shù)延時的時間單位毫秒返回定時器的,用于清除示例代碼延時定時器秒后將執(zhí)行的代碼。 showImg(https://segmentfault.com/img/remote/1460000012575821?w=1920&h=1080); 前言 本篇文章是JavaScript基礎(chǔ)知識的BOM篇,...
閱讀 1442·2023-04-25 17:18
閱讀 1882·2021-10-27 14:18
閱讀 2124·2021-09-09 09:33
閱讀 1840·2019-08-30 15:55
閱讀 2016·2019-08-30 15:53
閱讀 3440·2019-08-29 16:17
閱讀 3429·2019-08-26 13:57
閱讀 1730·2019-08-26 13:46