标签：JQuery 容器 浏览器 可视 tab var com 页面

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

 

by:授客 QQ：1033553122

1. 1.   测试环境

JQuery-3.2.1.min.js

下载地址：

https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js

 

Bootstrap-3.3.7-dist

下载地址：

https://gitee.com/ishouke/front_end_plugin/blob/master/bootstrap-3.3.7.zip

 

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"

                onl oad="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" onl oad="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.   参考链接

http://blog.sina.com.cn/s/blog_141f2f34a0102vmxh.html

https://segmentfault.com/q/1010000009247077

标签：JQuery,容器,浏览器,可视,tab,var,com,页面
来源： https://www.cnblogs.com/shouke/p/11429076.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。