首页 技术文章 jquery

判断元素是否在可视窗口

发布日期: 2024-04-01
FontSize: 【小 中 大】
判断元素是否在可视窗口

判断元素是否在可视窗口内，窗口滚动时，判断元素是否滚动到可视窗口内，是否超过了当前可视窗口。

主要变量：

var windowHeight = $(window).height(); 获取浏览器窗口的可视高度（不包括滚动条和边框）。

var scrollHeight = $(document).height(); 获取整个HTML文档的高度（包括滚动条和边框）。

var scrollTop = $(window).scrollTop(); 获取浏览器窗口在垂直方向上滚动的距离。

var twoTop = $('#two').offset().top; 获取ID为 "two" 的元素在文档中的垂直偏移量（相对于文档的顶部）。

var twoHeight = $('#two').outerHeight(); 获取ID为 "two" 的元素的外部高度（包括边框和内边距）。

主要事件：

$(window).scroll()，jQuery框架中用于实现滚动监听器，即用于在浏览器窗口滚动时触发指定的函数。

在线示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>判断元素是否滚动可视窗口</title>
<script src="https://z.lichil.com/views/index/js/jquery-1.9.1.min.js"></script>
<style>
#info { position: fixed; left:0; top:0; background: #D7E654;}
#one {
	margin-top: 500px;
	height: 300px;
	background-color: #f0f0f0;
}
#two {
	height: 500px;
	background-color: #C3F791;
}
#three {
	height: 500px;
	background-color: #F7E191;
}
</style>
</head>
<body>
<div id="info"></div>
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
<script>
$(window).scroll(function() {
    var windowHeight = $(window).height();
    var scrollHeight = $(document).height();
    var scrollTop = $(window).scrollTop();
    var twoTop = $('#two').offset().top;
    var twoHeight = $('#two').outerHeight();
    //检查 "two" 元素是否在滚动位置的下方或与其重叠。检查 "two" 元素是否在滚动位置的上方或与其重叠。
    if (twoTop + twoHeight > scrollTop && twoTop < scrollTop + windowHeight) {
        // 在可视窗口内
        $("#info").text("two元素可见");
    } else {
        // 不在可视窗口内
        $("#info").text("two元素不可见");
    }
});
</script>
</body>
</html>

 

jquery