图片懒加载之判断图片进入可视区域

2022-12-24 09:11:23 浏览数 (2)

Dom结构

代码语言：javascript复制
<div style="background-color: blue;width:100vw;height:5000px"></div>
<div id="img" style="background-color: blueviolet;width:100vw;height:500px"></div>

使用 clientHeight scrollTop offsetTop 判断

代码语言：javascript复制
document.addEventListener('scroll', () => {
	// 屏幕可视区域的高度
	const clientHeight = document.documentElement.clientHeight
	// 滚动条滚动的距离
	const scrollTop = document.documentElement.scrollTop
	// 图片元素距离顶部的距离
	const offsetTop = document.getElementById('img').offsetTop
	if (clientHeight   scrollTop > offsetTop) {
		// 已进入可视区域
		// do something
	}
})

使用 getBoundingClientRect

代码语言：javascript复制
document.addEventListener('scroll', () => {
	const domRect = document.getElementById('img').getBoundingClientRect()
	const innerHeight = window.innerHeight
	if (domRect.top <= innerHeight) {
		// 已进入可视区域
		// do something
	}
})

参考链接

  • Element.clientHeight
  • Element.scrollTop
  • HTMLElement.offsetTop
  • Element.getBoundingClientRect()
dom element scrolltop

0 人点赞