jquery判断元素是否出现在可视区

Posted 高亮

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery判断元素是否出现在可视区相关的知识,希望对你有一定的参考价值。

 

在我们的日常开发中,经常会遇到当元素出现在可视区的时候需要去出发某一事件的情况。
我最近在优化环球网首页的时候,将非可视区的代码全部放入到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判断元素是否出现在可视区的主要内容,如果未能解决你的问题,请参考以下文章

原生js如何判断元素出现在可视区

判断tableViewCell是否在可视区

粘性头部效果

better-scroll 实现tab栏目滑动当前高亮始终在可视区

jquery怎么判断是不是有某个元素

收藏|分享前端开发常用代码片段