摘要：表示元素可见课件内容的高度，包括以下几部分可见内容包括的高度，隐藏内容由于存在垂直滚动条不被包括。
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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113645.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篇，...
阅读 1440·2023-04-25 17:18
阅读 1879·2021-10-27 14:18
阅读 2123·2021-09-09 09:33
阅读 1839·2019-08-30 15:55
阅读 2014·2019-08-30 15:53
阅读 3439·2019-08-29 16:17
阅读 3428·2019-08-26 13:57
阅读 1730·2019-08-26 13:46
