判断元素位于可见视角

document.getElementById('imgafter').offsetTop // 元素居页面顶部
980
document.documentElement.scrollHeight // 页面卷曲高度 + 可见视角高度 === 卷曲总长度
992
document.documentElement.scrollTop // 当前页面卷曲高度
55
document.documentElement.clientHeight // 可见视角高度
937

判断元素是否 在 可见视角 + 当前页面卷曲高度 > 元素居页面顶部高度

如上所示
在这里插入图片描述
元素位于可见视角

应用场景 : 资源的懒加载
拓展

clientHeight 浏览器客户端可见视角高度
clientWidth 浏览器客户端可见视角宽度

scrollTop 网页卷曲 隐藏高度
scrollLeft 网页卷曲 隐藏宽度

offsetTop 元素离顶部的高度
offsetLeft 元素离顶部的宽度

offsetWidth 元素的宽度 offsetWidth = width + 左右padding + 左右bode
offsetHeight 和上一样

clientX 可见视角的x坐标
clientY 可见视角的y坐标

pageX 页面总高度的x坐标
pageY 页面总宽度的y坐标

scrollHeight 网页总高度
scrollWidth 网页总宽度

window.innerWidth 页面内容宽度
window.innerHeight 页面内容高度

猜你喜欢

转载自blog.csdn.net/qq_43505774/article/details/113735229