关于各种高度的获取方法
Posted zhoushiya
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于各种高度的获取方法相关的知识，希望对你有一定的参考价值。
window.scrollY=当前窗体下拉条偏移量=$(window).scrollTop()
obj.offsetTop=当前元素距离body顶部的距离
所以，想要得到当前元素离浏览器顶部的距离=obj.offsetTop-window.scrollY;
判断浏览器下拉条是否到底部：
1.首先要知道下拉条是由于浏览器可视区域高度>文档高度才出现的
2.浏览器可视区域高度：$(window).height()，文档高度：$(document).height()，下拉条上方偏移量：$(window).scrollTop()
3.这三者之间存在的关系：文档高度=下拉条上方已经偏移的量+浏览器可视区域高度+下拉条下方还未达到的量
4.如果下拉条到达底部，即下拉条下方还未达到的量=0，这时就满足了一个关系式：文档高度=下拉条上方已经偏移的量+浏览器可视区域高度，即：$(document).height()=$(window).scrollTop()+$(window).height()，只需要判断这三者的关系即可。
判断元素是否在可视区域内：
如图所示，处于元素A与元素B之间的元素即为在可视区域内。
需要满足两个条件：1.$(obj).offsetTop()+$(obj).height()>$(window).scrollTop()，接近于元素A时的条件
2.$(obj).offsetTop<$(window).scrollTop()+$(window).height()，接近于元素B时的条件
另外附上本例测试代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script src="Scripts/jquery-3.1.0.js"></script> <script src="Scripts/jquery.wresize.js"></script> <style> label{ display:block; } </style> </head> <body style="height:100%;"> <div id="lbl"> <label>这是一个label</label> <label>这是一个label</label> <label>这是一个label</label> <label>这是一个label</label> <label>这是一个label</label> <label>这是一个label</label> <label>这是一个label</label> <label>这是一个label</label> <label>这是一个label</label> <label>这是一个label</label> <label>这是一个label</label> <label>这是一个label</label> <label>这是一个label</label> <label>这是一个label</label> <label>这是一个label</label> <label>这是一个label</label> <label>这是一个label</label> <label>这是一个label</label> </div> <script> var isFocusStrong = true; var maxSize = 30; var minSize = 12; SetStrong(); $(window).resize(function () { if (isFocusStrong) { SetStrong(); } }); $(window).scroll(function () { var windowScrollTop = $(window).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(window).height(); if (windowScrollTop + windowHeight == scrollHeight) { } else if (isFocusStrong) { SetStrong(); } }); function SetStrong() { $.each($("label"), function (i, obj) { var isVisible = false; //元素距离文档顶部的距离 var objOffsetTop = obj.offsetTop; //浏览器窗体下拉条偏移量 var windowScrollTop = $(window).scrollTop(); //可视区域的高度 var windowHeight = $(window).height(); if ((objOffsetTop + $(obj).height() > windowScrollTop) && (objOffsetTop < windowScrollTop + windowHeight)) { isVisible = true; } if (isVisible) { //元素距离可视区域顶端的距离 var top = objOffsetTop - windowScrollTop; var p = top / windowHeight; var size = (1 - Math.abs(p - 0.45)) * maxSize; if (size < minSize) size = minSize; $(obj).css("font-size", size + "px"); $(obj).text("($(window).scrollTop():" + windowScrollTop + ",top:" + top + ",obj.offsetTop:" + objOffsetTop + ",$(obj).height():" + $(obj).height() + ",isVisible:" + isVisible + ")"); } else { $(obj).text("(isVisible:" + isVisible + ")"); } }); }; // 获取页面可视区域高度、宽度 function getPageSize() { var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = window.innerWidth + window.scrollMaxX; yScroll = window.innerHeight + window.scrollMaxY; } else { if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer if (document.documentElement.clientWidth) { windowWidth = document.documentElement.clientWidth; } else { windowWidth = self.innerWidth; } windowHeight = self.innerHeight; } else { if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else { if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight } } } // for small pages with total height less then height of the viewport if (yScroll < windowHeight) { pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if (xScroll < windowWidth) { pageWidth = xScroll; } else { pageWidth = windowWidth; } arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight); return arrayPageSize; } function GetSize() { $("#lbl").html( "屏幕分辨率为：" + screen.width + "*" + screen.height + "<br />" + "屏幕可用大小：" + screen.availWidth + "*" + screen.availHeight + "<br />" + "网页可见区域宽：" + document.body.clientWidth + "<br />" + "网页可见区域高：" + document.body.clientHeight + "<br />" + "网页可见区域宽(包括边线的宽)：" + document.body.offsetWidth + "<br />" + "网页可见区域高(包括边线的宽)：" + document.body.offsetHeight + "<br />" + "网页正文全文宽：" + document.body.scrollWidth + "<br />" + "网页正文全文高：" + document.body.scrollHeight + "<br />" + "网页被卷去的高：" + document.body.scrollTop + "<br />" + "网页被卷去的左：" + document.body.scrollLeft + "<br />" + "网页正文部分上：" + window.screenTop + "<br />" + "网页正文部分左：" + window.screenLeft + "<br />" + "屏幕分辨率的高：" + window.screen.height + "<br />" + "屏幕分辨率的宽：" + window.screen.width + "<br />" + "屏幕可用工作区高度：" + window.screen.availHeight + "<br />" + "屏幕可用工作区宽度：" + window.screen.availWidth ); } </script> </body> </html>
以上是关于关于各种高度的获取方法的主要内容，如果未能解决你的问题，请参考以下文章
《JavascriptjQuery获取各种屏幕的宽度和高度方法》
我的Android进阶之旅关于Android平台获取文件的mime类型：为啥不传小写后缀名就获取不到mimeType？为啥android 4.4系统获取不到webp格式的mimeType呢？(代码片段
我的Android进阶之旅关于Android平台获取文件的mime类型：为啥不传小写后缀名就获取不到mimeType？为啥android 4.4系统获取不到webp格式的mimeType呢？(代码片段