在我们的日常开发中，经常会遇到当元素出现在可视区的时候需要去出发某一事件的情况。
我最近在优化环球网首页的时候，将非可视区的代码全部放入到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. 2019-11-9-win10-支持默认把触摸提升-Pointer-消息

    title author date CreateTime categories win10 支持默认把触摸提升 Pointer 消息 lindexi 2019-11-09 15:32:31 +0800 ...

  2. RuntimeError: Python is not installed as a framework. The Mac OS X backend will not be able to function correctly if Python is not installed as a framework. See the Python documentation for more infor

    在virtualenv环境下使用matplotlib绘图时遇到了这样的问题: >>> import matplotlib.pyplot as pltTraceback (most r ...

  3. webpack打包出错分析

    Module not found: Error: Can't resolve 'bundle.js' in 更改打包命令 webpack run1.js  -o bundle.js

  4. Algo: Dynamic programming

    Copyright © 1900-2016, NORYES, All Rights Reserved. http://www.cnblogs.com/noryes/ 欢迎转载,请保留此版权声明. -- ...

  5. Vagrant box ubuntu/xenial64 添加vagrant用户解决没有登录密码的问题

    参考了Vagrant box ubuntu/xenial64 の ubuntuユーザ の passwordについて 1. 可以通过 Git Bash 使用  vagrant ssh 登录到Ubuntu ...

  6. idea-----Intellij IDEA配置tomcat（非maven项目）

    Intellij IDEA配置tomcat(非maven项目) 引用: https://blog.csdn.net/springlovejava/article/details/78570241 ID ...

  7. Java虚拟机性能管理神器 - VisualVM（9） 排查JAVA应用程序线程死锁【转】

    Java虚拟机性能管理神器 - VisualVM(9) 排查JAVA应用程序线程死锁[转] 标签: javajvm监控工具性能优化 2015-03-11 19:59 1948人阅读 评论(0) 收藏  ...

  8. 关于str的打印格式

    实际上一般的打印格式应该是这样的: %[(keyname)][flags][width][.precision]typecode (1) keyname: 用于打印Dict类型时做索引; (2) fl ...

  9. 2、java变量+零碎知识点

    1>展示console:window--show view--console2>创建工程 右键--new---java project 文件夹 jre src 所有的java类都在src中 ...

  10. make: 警告:检测到时钟错误。您的创建可能是不完整的。

    我在make的时候也出现了同样的问题,不过不是什么大问题,这个不影响编译结果,但是强迫症还是希望能解决掉 分析原因可能是:服务器上的文件最后修改时间比当前时钟要晚 解决办法:用touch 命令把源程序 ...