var viewH = document.documentElement.clientHeight;//视口总高度
var scrollHeight = document.documentElement.scrollHeight;//文档总高度(包含滚动区域内容)
function lazyload() {
var nodes = document.querySelectorAll('.fadeInUp');
Array.prototype.forEach.call(nodes, function(item, index) {
var rect = item.getBoundingClientRect();
//rect.top 元素顶部距离视口起点位置(在视口之上时为负数值)
//rect.bottom 元素底部距离视口起点位置(在视口之上时为负数值)
//rect.height = rect.bottom - rect.top 元素自身高度等于元素底部-元素顶部距离视口
// |<—————————————————— 视口起点
// |——————rect.top—————|
// | |
// | rect.height |
// | |
// |—————rect.bottom———|
//元素顶部距离视口起点位置小于一个屏幕高度,
//并且元素底部距离视口起点位置大于0(负数代表在视口之上)
if (rect.top < viewH && rect.bottom >= 0) {
(function(item) {
console.log("可视区域:",$(item).text())
})(item)
}
})
}
判断元素是否在页面当前视口中
最新推荐文章于 2023-06-02 16:43:23 发布