专栏首页授客的专栏JQuery 获取元素到浏览器可视窗口边缘的距离

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

  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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Ajax 的简介与使用

    Ajax 的全称是 Asynchronous JavaScript and XML(即异步的 JavaScript 和 XML),是一种在无需重新加载整个网页的...

    Leophen
  • golang filepath (路径工具)

    copy_left
  • golang 文件操作

    func ReadFile(){ filePath := './data.json'; fileContent := '';

    copy_left
  • golang path 路径包

    copy_left
  • SpringBoot优雅地配置日志

    我们可以通过一个配置文件来灵活地进行上面的配置,而不需要修改应用的代码。Log4j作为当时作为最先比较流行的日志框架,给我们在应用开发和维护带来了很大的便捷。

    乱敲代码
  • JSON 的简介与使用

    JSON(javascript object notation)全称是 javascript 对象表示法,是一种数据交换的文本格式,用于读取结构化数据,提出目的...

    Leophen
  • 「css基础」你想知道的伪元素内容都在这篇文章里(长文值得收藏)

    最近因为一些网页的需要,需要比较深入的使用了CSS 的「伪元素」( Pseudo Element ),发现原来不只是用用before或after 而已,可以玩的...

    前端达人
  • golang strings 字符串操作

    copy_left
  • 跨域的简介与解决方案

    跨域是指一个域下的文档或脚本试图去请求另一个域下的资源(只要域名、协议和端口有任一个不同,就被当作是跨域)

    Leophen
  • ES6 Promise

    Promise 的状态只有两种可能,从 pending 变为 fulfilled 和 从 pending 变为 rejected,一旦状态变化,就不会再改变

    Leophen

扫码关注云+社区

领取腾讯云代金券