在我们的日常开发中，经常会遇到当元素出现在可视区的时候需要去出发某一事件的情况。
我最近在优化环球网首页的时候，将非可视区的代码全部放入到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. Linux 下 Nand Flash 驱动主要数据结构说明

    s3c2410 专有数据结构 s3c2410_nand_set struct s3c2410_nand_set { int                    nr_chips;     /* 芯片 ...

  2. inux下tcpdump命令的使用

    tcpdump | grep 120.241.0.223 tcpdump | grep 106.39.153.237 tcpdump host 172.31.140.147 and 120.241.0 ...

  3. android 使用现成做get请求

    //接受子线程发来的消息 Handler hanler = new Handler() { @Override public void handleMessage(Message msg) { // ...

  4. js怎样截取以'-'分割的字符串

    在日期2019-09-01,怎样截取年只要月和日,下面是主要代码 var aa = '2019-09-01'; var bb = aa.split('-'); console.log(bb);//打印 ...

  5. 阿里巴巴大数据产品最新特性介绍--机器学习PAI

    以下内容根据演讲视频以及PPT整理而成. 本次分享主要围绕以下五个方面: PAI产品简介 自定义算法上传 数加智能生态市场 AutoML2.0自动调参 AutoLearning自动学习 一.PAI产品 ...

  6. UNION操作用于合并两个或多个 SELECT 语句的结果集。

    UNION操作用于合并两个或多个 SELECT 语句的结果集. 大理石平台价格 使用示例: $Model->field('name') ->table('think_user_0') -& ...

  7. 0905NOIP模拟测试赛后总结

    40分rank33.连续爆炸祭. 这次爆炸和心态无关.主要是答题策略出了点问题.T2大众分20.暴搜打表非常强. 拿到题目看到前面人都看pdf,突然想跟风皮一把,就把刚下的doc也转成pdf了hhh ...

  8. 0817NOIP模拟测试赛后总结

    吐槽一句:话说NOIP都取消了还叫NOIP模拟真的好么 于是乎我再次爆炸……(0+20+50=70 rank26) 赛时状态 赛时的状态依旧不佳.不过还是硬逼着自己把三道题都读完,然后开始对出题人静坐 ...

  9. position:fixed失效问题

    fixed定位的元素,如果父级有transform样式,值不为none,那么fixed定位就会失效. 解决方法:使用transform样式的元素,不要包含fixed定位的子元素.

  10. javaweb的几种开发模式

    1.MVC模式基础 1.1.MVC模式简介 MVC是一种架构型模式,它本身并不引入新的功能,只是用来指导我们改善应用程序的架构,使得应用的模型和视图相分离,从而达到更好的开发和维护效率.在MVC模式中 ...