在我们的日常开发中，经常会遇到当元素出现在可视区的时候需要去出发某一事件的情况。
我最近在优化环球网首页的时候，将非可视区的代码全部放入到webComponent中。打算当这个元素出现在可视区的时候去加载对应的shadowRoot。

那么，言归正传，对于我这个前端小白，还是好先搞定如何判断元素出现在可视区啊！

jquery实现起来比较简单，先解释下几个东东

offset().top和offsetTop；
offsetTop:元素border外侧到offsetParent()的偏移量。（offsetParent():是元素的第一级拥有定位属性(absolute/relative/fixed)的父元素）.
offset().top:到document的绝对偏移量，这个当然就是我们需要的。offset().top当浏览器出现滚动条的时候，offset().top是不会变化的，当没有滚动条的时候，这个值是会变化的（可以理解的哈）。
outHeight(): 元素的height＋padding＋border
outHeight(true):元素的height＋padding＋border＋margin
$(window).height():浏览器可视窗口的高度
$(window).scrollTop():document的顶部和浏览器顶部的距离

所以我们就可以很简单的判断元素是不是出现在浏览器可视区了：
代码如下（这里我故意加了个div，position为relative）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <meta charset="utf-8">

    <title>js</title>

    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $(window).scroll(function () {

                var a = $("#eq").offset().top;

                console.log(a);

                console.log($(window).scrollTop());

                console.log($(window).height());

                if (a >= $(window).scrollTop() && a < ($(window).scrollTop() + $(window).height())) {

                    console.log("div在可视范围");

                }

            });

        });

    </script>

</head>

<body>

<div style="width:1px;height:2000px; -webkit-tap-highlight-color: transparent;">></div>

<div style="position:relative">

    <div id="eq" style=" width:100px; height:100px; ">1</div>

</div>

<div style="width:1px;height:2000px; -webkit-tap-highlight-color: transparent;">></div>

</body>

</html>

jquery判断元素是否出现在可视区的更多相关文章

  1. JQuery判断元素是否存在

    JQuery判断元素是否存在的原理与javascript略有不同,因为$选择器选择的元素无论是否存在都不会返回null或undefined,要使用JQuery判断元素是否存在,只能使用length属性 ...

  2. jQuery判断元素是否存在方法

    1.使用javascript判断元素是否存在 if(document.getElementById('div')) { } else { } 2.使用jquery判断元素是否存在 if ($(&quo ...

  3. jquery判断元素是否隐藏的多种方法

    第一种:使用CSS属性 复制代码 代码如下: var display =$('#id').css('display'); if(display == 'none'){    alert("被 ...

  4. js jquery 判断元素是否在数组内

    js jquery 判断元素是否在数组内 一,js方法 var arr = ["a", "b", "c"]; // js arr.index ...

  5. jquery判断元素的子元素是否存在

    jquery判断元素的子元素是否存在的示例代码. jquery判断子元素是否存在 一.判断子元素是否存在 //一级子元素 if($("#specialId>img").len ...

  6. jquery判断元素是否存在在数组中

    var myArray = new Array(); function checkRepeat(sel) { console.log("索引是:" + $.inArray(sel, ...

  7. jQuery判断元素是否存在方法总结

    在jquery中判断元素是否存在我们可使用$("#div").length > 0)来判断了,意思就是判断元素长度了,如果没有肯定是不存在的哦,下面我来介绍介绍. 使用传统j ...

  8. jQuery判断元素是否是隐藏的代码

    if($("#elem_id").is(":hidden")) { } 实例代码1: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC & ...

  9. jQuery判断元素是否显示与隐藏

    jQuery判断一个元素是显示还是隐藏,jQuery使用is()方法来判断一个元素是否显示,反之则为隐藏 核心代码 if($("#username").is(":hidd ...

随机推荐

  1. 求教各路大神,Fillder的证书一直无法在手机上打开,请教怎么解决

    我跟足大神们的设置,软件是Fiddler4,手机是ios12.3.1. FD上该打勾的打勾了,该装证书的也装了,有帖子说重装证书和软件我也都试过,电脑也下了NET Framework 4.7_4.7. ...

  2. OA系统和ERP系统的区别

    一.OA和ERP的区别 1.含义不同: OA指Office Automation,中文简称自动办公系统,帮助企业内部管理沟通的工具,比如新闻公告.内部沟通.考勤.办公.员工请假.审批流程等. ERP指 ...

  3. leetcode-第5周双周赛-1136平行课程

    方法一: class Solution(object): def minimumSemesters(self, N, relations): """ :type N: i ...

  4. 期望——邮票收集问题lightoj1342

    邮票手机问题: 有n种类型的邮票,问将所有的类型的邮票全部收集起来所要的收集次数期望是多少. 设dp[i]为已经收集了i种类型的票,还要收集n-i种的次数的期望. dp[n]=0; 递推式: dp[i ...

  5. 在vc2008 mfcC++中使用sqlite的示例

    http://owlman.org/?p=890 在C++中使用sqlite的示例 2011年8月5日admin发表评论阅读评论 最近因为工作原因,终于使我有机会腾出时间来接触了一下SQLite数据库 ...

  6. LUGOU P1092 虫食算

    传送门 解题思路 刚开始按yzy神犇给的方法写,就是每次要把能算出来的都算出来,结果因为太菜写挂了..后来直接爆搜水过.. #include<iostream> #include<c ...

  7. github上创建java项目简单操作

    github上创建java项目简单操作 参考L: github上创建java项目简单操作 - CSDN博客http://blog.csdn.net/qq_29392425/article/detail ...

  8. C++和C#之间的数据类型对应关系

    最近接触WINAPI比较多,一直要楂数据类型间的对应关系,所姒就转载一下~ # Windows Data Type .NET Data Type # BOOL, BOOLEAN Boolean or ...

  9. pymysql 使用

    适用环境 python版本 >=2.6或3.3 mysql版本>=4.1 安装 可以使用pip安装也可以手动下载安装. 使用pip安装,在命令行执行如下命令: 1 pip install  ...

  10. C语言中常用的字符串处理函数总结

    C语言中字符串处理函数备注 此文仅用于自己研究和记录 字符串处理函数 1. char *gets(char *s); #include<stdio.h> 功能: 从标准输入读入字符,并保存 ...