Js如何判断元素是否在屏幕可视范围内小白帮助
假设目标元素:#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("消失了")
}
可应用场景是惰性加载,当元素首次出现在屏幕中时,加载特定的资源。