使用 jQuery 可以检查滚动后元素是否可见的方法之一。
这种方法认为没有水平滚动。
我们可以使用 $(window).scrollTop() 和 $(window).height() 获取窗口顶部的高度。
要获取元素顶部，请使用 $(elem).offset().top，并使用 $(elem).height() 作为高度。
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<style>
.largebox {
height: 1500px;
}
.box {
height: 400px;
}
</style>
</head>
<body>
<div class="largebox">
<div id="msg" style="position:fixed;left:30%;"></div>
<div class="box">First box</div>
<div id="box1" class="box1">Second box</div>
</div>
<script>
function isVisible($el) {
let docViewTop = $(window).scrollTop();
let docViewBottom = docViewTop + $(window).height();
let elTop = $el.offset().top;
let elBottom = elTop + $el.height();
return((elBottom <= docViewBottom) && (elTop >= docViewTop));
}
$(function() {
$("#msg").text("#Second box visible=" + isVisible($("#box1")));
$(window).scroll(function() {
$("#msg").text("Second box visible=" + isVisible($("#box1")));
});
});
</script>
</body>
</html>
我们可以调用一个实用程序函数，该函数接受我们正在搜索的元素并使元素完全或者部分可见：
function Utils() {
//...
}
Utils.prototype = {
constructor: Utils,
elementInView: function (el, fullView) {
let pageTop = $(window).scrollTop();
let pageBottom = pageTop + $(window).height();
let elTop = $(el).offset().top;
let elBottom = elTop + $(el).height();
if (fullView === true) {
return ((pageTop < elTop) && (pageBottom > elBottom));
} else {
return ((elTop <= pageBottom) && (elBottom >= pageTop));
}
}
};
let Utils = new Utils();
用法如下：
let elementInView = Utils.elementInView($('#flyoutLeftContainer'), false);
if (elementInView) {
console.log('In view');
} else {
console.log('Out of view');
}
这仅适用于文档是可滚动元素的情况。
日期：2020-06-02 22:16:10 来源：oir作者：oir