经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
JQuery 获取元素到浏览器可视窗口边缘的距离
来源:cnblogs  作者:授客  时间:2019/8/30 9:28:19  对本文有异议

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

 

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代码实现
  1.  
  1. /**
  1. * 设置tab标签页对应的页面内容高度
  1. */
  1. function setTabPageContentHeight() {
  1.     var contentContainer =  $('#tabContent '); // 获取tab标签对应的页面div容器对象
  1.     var elementHeight = contentContainer.height();  //容器对象自身高度(如果页面刚加载完,这时还没打开tab页,会出现容器高度为0的情况
  1.     var offsetTop = contentContainer.offset().top;  //容器距离document顶部的距离
  1.     var scrollHieght = $(document).scrollTop();  // 滚动条高度
  1.     var windownHeight = $(window).height();   //浏览器可视窗口的高度(不包括内边距、边框和外边距)
  1.  
  1.     // 获取tab页面内容容器高度
  1.     var h = windownHeight - (offsetTop-scrollHieght) - elementHeight;
  1.  
  1. }
  1.  

 

注意:当改变浏览器窗口高度时,$(window).height() 会随之动态改变

 

 

  1. 5.   参考链接

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

https://segmentfault.com/q/1010000009247077

原文链接:http://www.cnblogs.com/shouke/p/11429076.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号