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

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

 

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"

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

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

https://segmentfault.com/q/1010000009247077

posted @   授客  阅读(4213)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示