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

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

by:授客 qq：1033553122

1. 1.   测试环境

jquery-3.2.1.min.js

下载地址：

bootstrap-3.3.7-dist

下载地址：

win7

1. 2.   需求场景

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

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

1. 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>

1. 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() 会随之动态改变

1. 5.   参考链接