1。windowwindow.innerWidth可以获取窗口下的宽高，可以省略高度。通过字面意思我们知道这是一个内部宽度。如果有滚动条，它包括滚动条窗口的宽度。innerHeight，表示里面可用的高度，如果有滚动条，则包括滚动条window.outWidth的高度，整个窗口的宽度window.outHeight，整个窗口的高度，window下的宽度。screen，主要是window和screen之间距离的几个主要区别属性名称描述备注window.innerHeight浏览器的窗口高度，如果有水平滚动条，则包含滚动条的高度只读属性，IE8及以下不支持document.documentElement.clientHeight不包含滚动条，包含html元素边框document.body.clientHeight不包含滚动条，不包含html和body的边框和滚动条2.宽高文件下首先我们来看一张各种尺寸的图片。地址文档下有3个相关的宽高与client相关的宽高和与offset相关的宽高和与scroll相关的宽高。offsetHeigth表示VISIBLEcontent&padding+border+scrollbar，即content的可见区域加上padding和border和滚动条（如果有）clientHeight表示VISIBLEcontent&padding，即可见区域的高度加上paddingscrollHeight表示ENTIREcontent&padding(visibleorhidden)，即整个内容的高度加上padding（可见或隐藏）。我们在设置div的宽高的时候，实际上是设置了内容区域的宽高，而padding和border是一样的，所以元素的总高度是content+margin+padding1。offsetHeightoffsetHeight表示元素在HTML页面中所占的高度。使用开发者工具时，移动到div上面，显示的宽高是实际占用的高度，包括以下部分：可见内容区域的高度，不包含在水平滚动条中的隐藏内容的高度由于存在滚动条，以及顶部和底部的bordermar杜松子酒不包括在内，因为它是孤立元素的一部分。2、clientHeightclientHeight表示元素可见课件内容的高度，包括以下部分：可见内容的高度（包括padding），由于垂直滚动条的存在不包括隐藏内容。3.scrollHeightscrollHeight表示可见/隐藏元素的总高度，包括以下几部分：可见内容的高度包括padding，隐藏内容的高度包括padding，不包括border和marginOnlinedemo3.HTMLElement.scrollXXX属性下面的属性都是只读属性，返回当前元素相对于scrollParent的距离c.offsetHeight和c.offsetWidth当前元素及其所有内容的高度和宽度。c.offsetParent是离当前元素最近的定位元素。定位属性有relative、absolute等，标准模式下为html，怪异模式下为body4。兼容方案1、浏览器可见区域的宽高letheight=window.innerHeight||文档.documentElement.clientHeight||document.body.clientHeight;让width=window.innerWidth||文档.documentElement.clientWidth||document.body.clientWidth2.当前元素到文档顶部的距离当offsetParent为body时，可以通过el.offsetTop确定距文档顶部的高度，可以使用如下方法判断函数getTop(el){lettop=el.offsetTop;让currentParent=el.offsetParent;while(currentParent!=null){top+=currentParent.offsetTop;currentParent=currentParent.offsetParent;}returntop;}3.滚动（rolledaway）高兼容方案window.pageYOffset是window.scrollY的别名scrollTop表示距离scrollParent被滚开的距离，scrollheight是元素的整个高度，包括溢出隐藏部分varx=window.pageXOffset||文档.documentElement.scrollLeft||document.body.scrollLeftvary=window.pageYOffset||文档.documentElement.scrollTop||document.body.scrollTop是否滚动到底部//文档高度-滚动高度===视口高度ele.scrollHeight-ele.scrollTop===ele.clientHeight;//文档高度，包括填充，不包括borderele.scrollHeight=document.documentElement.scrollheight;//滚动高度ele.scrollTop=Math.round(document.documentElement.scrollTop);//视口高度ele.clientHeight=document.文档元素.clientHeight；场景一：懒加载实现需要获取高度varclientY=window.innerheight||==未定义；varisCSS1Compat=((document.compatMode||"")==="CSS1Compat");varx=supportPageOffset?window.pageXOffset：isCSS1Compat？document.documentElement.scrollLeft:document.body.scrollLeft;vary=supportPageOffset?window.pageYOffset：isCSS1Compat？文档.documentElement.scrollTop:文档.body.scrollTop;判断图片是否出现在窗口中，主要有三个height当前body从顶部滚动到距离document.body.scrollTop窗口的距离window.innerHeight当前图像到顶部的距离offsetTop两种常见的scrollingjudgements页面滚动离开首屏（此时可以显示返回顶部的按钮）：document.body.scrollTop>window.innerHeight页面已经滚动到底部（此时可以调整获取更多内容的界面）：window.scrollY+window.innerHeight>document.body.scrollHeight函数isBottomVisible(){varscrollY=window.pageYOffset||文档.documentElement.scrollTop||文档.body.scrollTop;varclientY=window.innerHeight||文档.documentElement.clientHeight||文档.body.clientHeight；varpageY=document.documentElement.scrollHeight||文档.body.scrollHeight;//console.log(scrollY,clientY,pageY);returnMath.round(scrollY)+clientY===pageY},场景二：滚动到指定位置//滚动到指定位置window.scrollTo(0,100);window.scroll(0,100);//计算距离垂直滚动条if(document.body.clientWidth!==window.innerWidth){varscrollHeight=window.innerWidth-document.body.clientWidth;}//滚动到顶部if(window.scrollY){window.scroll(0,0);}参考SRCMDNblogsize和scrollwindowsize和scrollJavaScript学习笔记：viewportwidthheight,positionandscrollheightSF
