如何判断一个元素是否在可视区域内

以使用 JQuery 实现为参考

目标元素：#card

let $card = $('#card');

当页面滚动时，元素随页面滚动，该元素距离顶部的距离

let cardOffsetTop = $("#card").offset().top;

获取 card 的高度（card 包含外边距）

let cardOuterHeight = $("#card").outerHeight(true); //这个方法可以传递一个参数true, 如果传递表示需要求出的高度含有外边距, 否则不含有. 具体视需求而定.

获取页面滚动的距离

let winScrollHeight = $(window).scrollTop();

浏览器可见区域的高度:

let winHeight = $(window).height();

那应该如何确定元素在可见区域内呢？

实现代码：

if(!(winScrollTop > cardOffsetTop+ cardOuterHeight) && !(winScrollTop < cardOffsetTop - winHeight)) {
    console.log("在可视区域出现")
	  //既不在 card 下面，也不在 card上面
} else {
    console.log("在可视区域消失")
}