html获取边缘元素,JQuery 获取元素到浏览器可视窗口边缘的距离

获取元素到浏览器可视窗口边缘的距离

by:授客 QQ：1033553122

1.测试环境

JQuery-3.2.1.min.js

下载地址：

Bootstrap-3.3.7-dist

下载地址：

win7

2.需求场景

实现需求：如下，获取tab标签页到页面底端的距离

前提：tab标签元素自身不携带滚动条

3.HTML代码片段

border="0"

marginwidth="0"

marginheight="0"

scrolling="yes"

allowtransparency="yes"

οnlοad="changeFrameHeight()">

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.参考链接