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>

posted @ 2018-05-31 17:08 高亮uncle 阅读(3402) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

公告

昵称：高亮uncle
园龄： 7年9个月
粉丝： 25
关注： 12

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. vue全面介绍--全家桶、项目实例(1)

高亮

好雨知时节

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

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!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>