假设目标元素：#element

var element= $('#element');

该元素相对于文档顶部的偏移距离

var elementOffsetTop = $("#element").offset().top;

获取该元素的高度

var elementOuterHeight = $("#element").outerHeight(true); //这个方法可以传递一个参数true, 如果传递表示需要求出的高度含有外边距

获取页面滚动的距离

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

浏览器可见区域的高度:

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

那应该如何确定元素在可见区域内呢？
假设当元素的上边框刚好出现在浏览器的底部时（零界点）

winScrollHeight + winHeight = elementOffsetTop

此时，如果winScrollHeight 增加，则元素在屏幕内出现；如果winScrollHeight 减少，则元素在屏幕内消失。
翻译成程序就是：

winScrollHeight > elementOffsetTop-winHeight //元素出现
winScrollHeight <= elementOffsetTop-winHeight //元素消失

假设当元素的下边框刚好出现在浏览器的顶部时（零界点）

elementOffsetTop + elementOuterHeight = winScrollHeight

此时，如果winScrollHeight 增加，则元素在屏幕内消失；如果winScrollHeight 减少，则元素在屏幕内出现。
翻译成程序就是：

elementOffsetTop + elementOuterHeight > winScrollHeight //元素出现
elementOffsetTop + elementOuterHeight <= winScrollHeight //元素消失

实现代码：

if((winScrollHeight > elementOffsetTop-winHeight) && (winScrollTop < elementOffsetTop + elementOuterHeight)) {
     console.log("出现了")
} else {
     console.log("消失了")
}

可应用场景是惰性加载，当元素首次出现在屏幕中时，加载特定的资源。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/2954