JQuery 获取元素到浏览器可视窗口边缘的距离
获取元素到浏览器可视窗口边缘的距离
by:授客 qq:1033553122
- 1. 测试环境
jquery-3.2.1.min.js
下载地址:
bootstrap-3.3.7-dist
下载地址:
win7
- 2. 需求场景
实现需求:如下,获取tab标签页到页面底端的距离
前提:tab标签元素自身不携带滚动条
- 3. html代码片段
<div id="tabcontent" class="tab-content">
<!--通过js获取 tab对应的页面内容-->
<div id="tab-content-80" role="tabpanel" class="tab-pane">
<iframe name="tabiframe" id="ifm80" src="/platform/page/resourcesetting.html" width="100%" frameborder="no"
border="0"
marginwidth="0"
marginheight="0"
scrolling="yes"
allowtransparency="yes"
onload="changeframeheight()">
</iframe>
</div>
<div id="tab-content-117" role="tabpanel" class="tab-pane active">
<iframe name="tabiframe" id="ifm117" src="/platform/page/rolesetting.html" width="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes" onload="changeframeheight()">
</iframe>
</div>
</div>
- 4. js代码实现
/**
* 设置tab标签页对应的页面内容高度
*/
function settabpagecontentheight() {
var contentcontainer = $('#tabcontent '); // 获取tab标签对应的页面div容器对象
var elementheight = contentcontainer.height(); //容器对象自身高度(如果页面刚加载完,这时还没打开tab页,会出现容器高度为0的情况
var offsettop = contentcontainer.offset().top; //容器距离document顶部的距离
var scrollhieght = $(document).scrolltop(); // 滚动条高度
var windownheight = $(window).height(); //浏览器可视窗口的高度(不包括内边距、边框和外边距)
// 获取tab页面内容容器高度
var h = windownheight - (offsettop-scrollhieght) - elementheight;
}
注意:当改变浏览器窗口高度时,$(window).height() 会随之动态改变
- 5. 参考链接
上一篇: vue.js - 2
下一篇: C语言编程丨C语言指针和数组基础